Svg фильтры: Эффекты фильтрации SVG. Часть 1. SVG фильтры 101 / Хабр

SVG-фильтры. Часть 1. Основные понятия и типы. Применение к изображениям для создания графических эффектов.

SVG-фильтры – это воистину мощный, но при этом очень редко используемый инструмент. A все потому, что многие до сих пор испытывают страх перед SVG в целом, а уж фильтрация и эффекты кажутся чем-то специфическим и трудным для изучения.

В этой статье я попытаюсь убедить Вас в обратном, расскажу о возможностях и типах SVG-фильтров и, в частности, о том, как применить их к изображениям на веб-страницах.

SVG-фильтры поддерживаются почти всеми современными браузерами, включая мобильные. Исключение составляют IE9 и Android native browser версии ниже 4.4.

svg-filters поддержка браузерами

Чтобы понять, что представляет из себя фильтр в SVG, давайте разберем простой пример. Для начала мы нарисуем круг:

<svg viewbox="0 0 400 300">
    <circle cx="200" cy="200" fill="#3498db" r="80" />
</svg>

Если Вы вообще не знакомы с SVG, то сейчас самое время познакомиться 🙂

Вкратце:

• тег <circle> – это круг
• аттрибуты cx, cy – задают положение центра круга, fill – заливку, r – радиус.

То, что мы написали, будет выглядеть в браузере вот так:

Да, круто. Настоящий, большой и синий SVG-круг. А теперь давайте опишем простейший SVG-фильтр, задающий гаусовское размытие, и применим этот фильтр к нашей незамысловатой фигуре.

<svg viewbox="0 0 400 300">
  <defs>
    <filter>
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
  <circle cx="200" cy="150" fill="#3498db" filter="url(#myFilter1)" r="80" />
</svg>

Сам фильтр определяется в секции <defs> с помощью тега <filter>. Ему необходимо задать id (уникальный в контексте всего документа). У нас это id="myFilter1".

Внутри описываются типы применяемой фильтрации. В нашем примере это <feGaussianBlur>

, где атрибут stdDeviation регулирует уровень размытия.

Забегая вперед, скажем, что спецификация определяет несколько типов фильтрации с большим количеством возможных атрибутов для настройки их параметров.

Далее к той части SVG, которая должна быть обработана фильтром, нужно добавить атрибут filter="url(#myFilter1)" с указанием id фильтра.

И вот что получится:

Да! Вот он – наш первый SVG-фильтр. Не так сложно, как казалось, не правда ли? Идем дальше. Давайте применим такой же фильтр к растровой картинке. Для этого поместим изображение красивой девушки в наушниках внутрь SVG:

<svg viewbox="0 0 400 300">
  <image xlink:href="/blogdemo/img/girl.jpg" />
</svg>

И применим к изображению фильтр, описанный выше:

<svg>
  <defs>
    <filter>
      <feGaussianBlur stddeviation="5" />
    </filter>
  </defs>
  <image filter="url(#myFilter2)" xlink:href="/blogdemo/img/girl.jpg" />
</svg>

Получилась “разблюренная” девушка, как мы и ожидали. И это только начало. Продолжаем!

Комплексные SVG-фильтры. Применяем несколько эффектов последовательно.

Еще одним неотъемлемым достоинством SVG-фильтров является возможность сочетания нескольких типов фильтров. Т.е. результат, полученный после применения одного фильтра, может являться источником изображения для другого фильтра и т.д.

Чтобы было понятнее, давайте добавим еще один тип фильтрации для “разблюренной” девушки. Например, сделаем изображение черно-белым.

<svg viewbox="0 0 400 300">
  <defs>
    <filter>
      <feGaussianBlur in="SourceGraphic" result="a1" stddeviation="3" />
      <feColorMatrix in="a1" type="saturate" values="0"></feColorMatrix>
    </filter>
  </defs>
  <image filter="url(#myFilter3)" xlink:href="/blogdemo/img/girl.jpg" />
</svg>

Графически эту схему фильтрации можно представить как:

Как Вы видите, для каждого типа фильтров можно указать атрибуты in и result. Если они не указаны, фильтры будут применяться последовательно в порядке их записи.

В качестве in для первого типа фильтра по умолчанию используется предопределенное значение SourceGraphic (в нашем случае оно является псевдонимом <image>)

Типы SVG-фильтров

Как мы уже говорили, существует несколько возможных типов фильтров. Давайте разберем каждый из них подробнее. Для простоты восприятия мы будем рассматривать только код, находящийся внутри тега filter. Все остальное остается таким же, как в предыдущих примерах.

---

feComponentTransfer

Фильтр <fecomponenttransfer> позволяет производить линейные, табличные, дискретные операции над каналами изображения, а также изменять гамму каждого канала.

Давайте рассмотрим примеры:

<!--1-й пример -->
...
<fecomponenttransfer>
  <feFuncR type="linear" slope="5" intercept="-0.5" />
  <feFuncG type="linear" slope="0.2" />
  <feFuncB type="linear" slope="0.2" />
  <feFuncA type="identity" />
</fecomponenttransfer>
...

Здесь feFuncR, feFuncG, feFuncB, feFuncA – красный, зеленый, синий и канал прозрачности соответственно. type – тип преобразования, slope – множитель, intercept – добавляемое (отнимаемое) значение. T.е. <feFuncR type="linear" slope="5" intercept="-0.5" /> значит: red = red * 5 - 0.5

Вот так, например, можно сделать изображение полупрозрачным:

<!--2-й пример -->
...
<fecomponenttransfer>
  <fefunca type="linear" slope="0.5" />
</fecomponenttransfer>
...

A вот так выделить только синий канал:

<!--3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="linear" slope="0" />
  <fefuncg type="linear" slope="0" />
  <fefuncb type="linear" slope="1" />
</fecomponenttransfer>
...

Или просто заполнить значения атрибутов случайными значениями и получить интересный эффект.

<!--4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="linear" slope="10" intercept="-4" />
  <fefuncg type="linear" slope="1.5" intercept="1" />
  <fefuncb type="linear" slope="2" intercept="-1" />
</fecomponenttransfer>
...

Вот демо всех примеров, приведенных выше.

Фильтр <fecomponenttransfer> поддерживает не только линейные преобразования. Тип преобразований задается атрибутом type и может принимать значения identity | table | discrete | linear | gamma. Давайте бегло взглянем, что из себя представляет каждый из типов.

fecomponenttransfer с

type="table"

В случае fecomponenttransfer с типом table функция преобразования для канала будет определена путем линейной интерполяции между значениями, указанными в атрибуте tablevalues. А вот так, например, можно добиться эффекта “негатива”, используя табличные значения:

...
<fecomponenttransfer>
  <fefuncr type="table" tablevalues="1 0" />
  <fefuncg type="table" tablevalues="1 0" />
  <fefuncb type="table" tablevalues="1 0" />
</fecomponenttransfer>
...    

fecomponenttransfer с

type="discrete"

Для типа discrete функция будет ступенчатой, в соответствии со значениями, указанными в атрибуте tablevalues. Вот несколько примеров:

<!-- 1-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 0" />
  <fefuncg type="discrete" tablevalues="0 0" />
  <fefuncb type="discrete" tablevalues="0 0" />
</fecomponenttransfer>
...
<!--2-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 0" />
  <fefuncg type="discrete" tablevalues="0 0" />
  <fefuncb type="discrete" tablevalues="0 0" />
</fecomponenttransfer>
...
<!-- 3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 1 1" />
  <fefuncg type="discrete" tablevalues="0 0.8 1" />
  <fefuncb type="discrete" tablevalues="0 0.5 1" />
</fecomponenttransfer>
...
<!-- 4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="0 0" />
  <fefuncg type="discrete" tablevalues="0.1 0.6" />
  <fefuncb type="discrete" tablevalues="0.
  3 0.9" />
</fecomponenttransfer>
...

Имеется также возможность задавать значения гаммы каждого канала при помощи типа фильтра type="gamma" и атрибутов amplitude, exponent и offset для каждого из каналов.

Например, <fefuncg type="gamma" amplitude="1.2" exponent="0.5" offset="0.2" /> значит: green = 1.2 * pow(green, 0.5) + 0.2

Демо:

<!-- 1-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="1.1" exponent="1" offset="0" />
  <fefuncg type="gamma" amplitude="1.1" exponent="1" offset="0" />
  <fefuncB type="gamma" amplitude="1.3" exponent="0.9" offset="0.5" />
</fecomponenttransfer>
...
<!-- 2-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="2" exponent="1" offset="0.1" />
  <fefuncg type="gamma" amplitude="1" exponent="1.2" offset="0.1" />
  <fefuncB type="gamma" amplitude="1.
  4" exponent="1" offset="0.1" />
</fecomponenttransfer>
...
<!-- 3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
  <fefuncg type="gamma" amplitude="1" exponent="3" offset="0.1" />
  <fefuncB type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
</fecomponenttransfer>
...
<!-- 4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="0.4" exponent="1" offset="0.4" />
  <fefuncg type="gamma" amplitude="1" exponent="0.33" offset="0.33" />
  <fefuncB type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
</fecomponenttransfer>
...

---

feColorMatrix

Фильтр позволяет умножить каждый пиксель исходного изображения в виде вектора, образованного каналами R, G, B,

A и дополненного до размерности 5, на матрицу 5×5. В результате мы получим вектор, представляющий из себя каналы R', G', B', A' каждого пикселя результирующего изображения.

  | R' |     | a00 a01 a02 a03 a04 |   | R |
  | G' |     | a10 a11 a12 a13 a14 |   | G |
  | B' |  =  | a20 a21 a22 a23 a24 | * | B |
  | A' |     | a30 a31 a32 a33 a34 |   | A |
  | 1  |     |  0   0   0   0   1  |   | 1 |

Давайте сразу перейдем к примеру. Знакомый всем эффект “сепия” можно получить с помощью вот такой матрицы:

  0.343 0.669 0.119 0 0
  0.249 0.626 0.130 0 0
  0.172 0.334 0.111 0 0
  0     0     0     1 0
  0     0     0     0 1

Матрица записывается в атрибут values фильтра <fecolormatrix> с типом matrix в виде значений, разделенных пробелом.

Последнюю строку не нужно указывать, т.к. она всегда равна | 0 0 0 0 1 |.

<fecolormatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.130 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0" />

Для удобства чтения матрицу можно записать в таком виде:

<!-- 1-й пример -->
...
<fecolormatrix type="matrix"
  values="0. 343 0.669 0.119 0 0
          0.249 0.626 0.130 0 0
          0.172 0.334 0.111 0 0
          0     0     0     1 0" />
...

Давайте посмотрим еще на несколько примеров с различными матрицами:

  <!-- 2-й пример -->
  ...
  <fecolormatrix type="matrix"
    values="0.788 -0.262  0.474  0   0
            0.1    1.032 -0.132 -0.1 0
            -1     2.1    0.912 -2.8 0
            0      0      0      1   0" />
  ...    
  <!-- 3-й пример -->
  ...
  <fecolormatrix in="SourceGraphic" type="matrix"
    values="5   0   0 0 -0.2
            0 1.2   0 0 -0.2
            0   5 1.2 0 -0.2
            5   0   0 1    0 "/>
  ...    
  <!-- 4-й пример -->
  ...
  <fecolormatrix type="matrix"
    values="1.2 0   0 0 -0.2
            2   0   2 2 -0.2
            2   2 1.2 0 -0.2
            2   0   0 1    0"/>
  ...    

Вот результат:

Частные случаи цветовых матриц – это поворот изображения по цветовому кругу, изменение цветности и т. п. Чтобы упростить жизнь разработчикам и не требовать умножения на матрицы для типовых операций в спецификации для фильтров , определены вспомогательные типы type=saturate, type=hueRotate, type=luminanceToAlpha. Давайте рассмотрим примеры их использования:

Обесцвечивание с type="saturate", а также примеры, где цветность увеличена в 0, 0.5, 2, 5 раз, используя type="saturate":

<fecolormatrix type="saturate" values="0"   /> <!-- 1-й пример -->
...
<fecolormatrix type="saturate" values="0.5" /> <!-- 2-й пример -->
...
<fecolormatrix type="saturate" values="2"   /> <!-- 3-й пример -->
...
<fecolormatrix type="saturate" values="5"   /> <!-- 4-й пример -->

Поворот по цветовому кругу на 40, 120, 240, 320 градусов, используя type="hueRotate":

<fecolormatrix type="hueRotate" values="40"  /> <!-- 1-й пример -->
...
<fecolormatrix type="hueRotate" values="120" /> <!-- 2-й пример -->
. ..
<fecolormatrix type="hueRotate" values="240" /> <!-- 3-й пример -->
...
<fecolormatrix type="hueRotate" values="360" /> <!-- 4-й пример -->

---

Свертка

feConvolveMatrix

В процессе свертки матрица коэффициентов «умножается» на значения каналов пикселей изображения. Будет намного проще представить это графически:

Действие над изображением (или фильтрование изображения) определяется матрицей свертки m. Матрица свертки определяет то, как конкретный пиксель зависит от соседних пикселей в процессе свертки. Пиксель у в результирующем изображении зависит от пикселей x0 … x8 исходя из следующей формулы:

y = x0×m0 + x1×m1 + ... + x8×m8

Свертка используется в цифровой обработке изображений для различных целей. Это размытие, искусственное увеличение резкости и другие интересные эффекты.

Давайте посмотрим, как можно немного «подтянуть» резкость классического нечеткого #duckface изображения при помощи вот такого фильтра свертки с размерностью 3:

. ..
<feConvolveMatrix 
  order="3" 
  kernelMatrix=" 1  -1   1 
                -1  -1  -1 
                 1  -1   1">
</feConvolveMatrix>
...

Оригинальное изображение (слева) и результат фильтрации (справа)

Далее представлены еще несколько примеров для различных фильтров свертки:

<!-- 1-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.1 -1 1 -1 1"></feConvolveMatrix>
...
<!-- 2-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="9 0 0 0 1 0 0 0 -9"></feConvolveMatrix>
...
<!-- 3-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="-1 -1 -1 -1 7 -1 -1 -1 -1"></feConvolveMatrix>
...
<!-- 4-й пример -->
...
<feConvolveMatrix order="5" kernelMatrix="1 1 1 1 1 1 -2 -2 -2 1 1 -2 .01 -2 1 1 -2 -2 -2 1 1 1 1 1 1"></feConvolveMatrix>
...

Композитные операции c

feComposite

При помощи feComposite можно осуществлять арифметические и логические операции над слоями в svg.

<feComposite
    in="source1"
    in2="source2"
    operator="xor"/>

Давайте рассмотрим возможные значения на примерах:

over

in

out

atop

xor

arithmetic
k1=”0″ k2=”1″ k3=”-1″ k4=”1″

arithmetic
k1=”.5″ k2=”.5″ k3=”.5″ k4=”.5″

arithmetic
k1=”0″ k2=”1″ k3=”1″ k4=”0″

Режимы смешивания слоев с

feBlend

При помощи feBlend можно осуществлять смешивание слоев в svg.

<feBlend
    in="source1"
    in2="source2"
    mode="lighten"/>

Давайте рассмотрим возможные значения на примерах. Их не так много, как в photoshop и подобных редакторах, но все же есть наиболее часто используемые:

normal

screen

multiply

lighten

darken

Текстура (повторяющееся изображение) с

feTile

feTile позволяет сделать в svg текстуру. Это очень похоже на background-repeat: repeat; в html

<feTile in="source" />

Демо c svg-фильтрами:

В качестве демо посмотрите, что мы делали на halloween

Еще несколько примеров будут опубликованы в ближайшее время отдельными статьями.

В заключение:

Это первая статья с основами SVG фильтров. Продолжение седует…

Подписывайтесь на наши группы в Ваших любимых соц. сетях.

Posted on Октябрь 31, 2014
by Nedudi Дудин Дмитрий
11 Comments ↓
37,634 views

SVG фильтры

SVG фильтры позволяют добавлять различные графические эффекты SVG графике.

<defs> и <filter>

Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова «definitions» (пер. «определения») и содержит определение специальных элементов (таких как фильтры).

Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.

Элементы SVG фильтров

В SVG доступны следующие элементы фильтров:

• <feBlend> — фильтр для комбинирования изображений
• <feColorMatrix> — фильтр для трансформации цветов
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset> — фильтр для создания теней
• <feSpecularLighting>
• <feTile>
• <feTurbulence>
• <feDistantLight> — фильтр для освещения
• <fePointLight> — фильтр для освещения
• <feSpotLight> — фильтр для освещения

С любым элементом SVG можно использовать любое количество фильтров!

В данной главе Учебника по SVG графике мы всего лишь продемонстрируем несколько примеров использования SVG фильтров, чтобы вы смогли себе представить возможности SVG графики.

Эффект размытия

Фильтр <feGaussianBlur>.

Пример

Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg> 

Объяснение:

• Атрибут id элемента <filter> определяет уникальное имя фильтра
• Эффект размытия создается при помощи элемента <feGaussianBlur>
• Часть in=»SourceGraphic» определяет, что эффект создается для всего элемента
• Атрибут stdDeviation определяет размер размытия
• Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»

Создание тени (<feOffset>)

Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.

Пример

Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg> 

Объяснение:

• Атрибут id элемента <filter> определяет уникальное имя фильтра
• Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»

Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg> 

Объяснение:

• Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия

Теперь делаем тень черной:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg> 

Объяснение:

• Значение атрибута in элемента <feOffset> изменено на «SourceAlpha», которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия

Теперь обработаем тень как цвет:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feColorMatrix result="matrixOut" in="offOut" type="matrix"
       values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
       <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg> 

Объяснение:

• Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения ‘0.2’ в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)

— SVG: Масштабируемая векторная графика

Элемент SVG определяет пользовательский эффект фильтра путем группировки атомарных примитивов фильтра. Он никогда не отображается сам по себе, но должен использоваться атрибутом filter для элементов SVG или свойством CSS filter для элементов SVG/HTML.

Категории	Нет
Разрешенный контент	Любое количество следующих элементов в любом порядке: Элементы описания Элементы-примитивы фильтра ,

Глобальные атрибуты

• Основные атрибуты
• Атрибуты презентации
• Атрибуты XLink
• класс
• стиль

Специальные атрибуты

• x
• г
• ширина
• высота
• фильтр Рез Устаревший
• фильтры
• примитивные единицы
• ссылка: href

Этот элемент реализует интерфейс SVGFilterElement .

SVG

Результат

Спецификация
Модуль эффектов фильтра, уровень 1 # Элемент фильтра

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

• <феморфология>
• Учебное пособие по SVG: эффекты фильтра

Обнаружили проблему с содержанием этой страницы?

• Редактировать страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница изменялась 6 марта 2023 г. от участников MDN.

— SVG: Масштабируемая векторная графика

Элемент фильтра SVG изменяет цвета на основе матрицы преобразования. Цветовое значение каждого пикселя [R, G, B, A] является матрицей, умноженной на цветовую матрицу 5 на 5 для создания нового цвета [R', G', B', A'] .

Примечание: Символ штриха ' используется в математике для обозначения результата преобразования.

 | Р' | | r1 r2 r3 r4 r5 | | Р |
| Г' | | g1 g2 g3 g4 g5 | | г |
| Б' | = | b1 b2 b3 b4 b5 | * | Б |
| А' | | а1 а2 а3 а4 а5 | | А |
| 1 | | 0 0 0 0 1 | | 1 |
 

В упрощенном виде ниже показано, как рассчитывается каждый цветовой канал в новом пикселе. Последняя строка игнорируется, поскольку ее значения постоянны.

 R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
В' = b1*R + b2*G + b3*B + b4*A + b5
А' = а1*R + а2*G + а3*В + а4*А + а5
 

Возьмите количество красного цвета в новом пикселе или R' :

Это сумма:

• r1 умноженная на красный цвет старого пикселя R ,
• r2 раз зеленый цвет старого пикселя G ,
• r3 раз синего старого пикселя B ,
• r4 раз больше альфы старого пикселя A ,
• плюс сдвиг r5 .

Эти указанные суммы могут быть любыми действительными числами, хотя последние R’ будет зажат между 0 и 1. То же самое касается G’ , B’ и A’ .

 R' = r1 * R + r2 * G + r3 * B + r4 * A + r5
Новый красный = [r1 * старый красный] + [r2 * старый зеленый] + [r3 * старый синий] + [r4 * старый альфа] + [сдвиг r5]
 

Если, скажем, мы хотим сделать полностью черное изображение более красным, мы можем сделать r5 положительным действительным числом x , увеличив красноту каждого пикселя нового изображения на х .

Идентичная матрица выглядит следующим образом:

 R G B A W
Р' | 1 0 0 0 0 |
Г' | 0 1 0 0 0 |
Б' | 0 0 1 0 0 |
А' | 0 0 0 1 0 |
 

В нем каждое новое значение ровно в 1 раз превышает старое значение, и больше ничего не добавляется. Отсюда рекомендуется начинать манипуляции с матрицей.

Категории	Примитивный элемент фильтра
Разрешенный контент	Любое количество следующих элементов в любом порядке: ,

Глобальные атрибуты

• Основные атрибуты
• Атрибуты презентации
• Атрибуты примитивов фильтра, включая атрибуты x , y , ширина , высота и результат атрибуты.
• класс
• стиль

Специальные атрибуты

• в : Значения включают SourceGraphic , SourceAlpha , BackgroundImage , BackgroundAlpha , FillPaint , StrokePaint или ссылку на другой примитив фильтра .
• тип : значения включают матрицу , насыщенность , оттенок Rotate и яркость до альфа-канала .
• значения : Значение для типа матрицы, установленное в атрибуте типа .

Этот элемент реализует интерфейс SVGFEColorMatrixElement .

SVG

  2" />
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 210)"
    filter="url(#colorMeSaturate)" />
  насыщение
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 280)"
    filter="url(#colorMeHueRotate)" />
  hueRotate
  
  <фильтр>
    
  
  
  яркость до альфы

 

Результат

90 034

Скриншот	Живой образец

Спецификация
Модуль эффектов фильтра, уровень 1 # feColorMatrixElement

9 0002 Таблицы BCD загружаются только в браузере с включенным JavaScript.