Фильтр SVG <filter>

Элемент <filter> SVG используется для добавления красивых эффектов к SVG-изображениям. Например, тени, размытие или блики.

Пример фильтра

Вот пример простого SVG-фильтра, который показывает два эллипса. Левый эллипс не использует фильтр, правый эллипс отрисовывается с помощью фильтра размытия Гаусса:

<svg width="500" height="100">
<defs>
　　　　　　<filter id="blurFilter" y="-5" height="40"
　　　　　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
　　　　　　</filter>
　　</defs>
　　　　
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke: none; fill: #0000ff; " />
　　<ellipse cx="155" cy="60" rx="25" ry="15"
　　　　　　　　　　　style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" />
</svg>

Эффект изображения после выполнения:

Обратите внимание, как размыты края правого эллипса.

Вход и выход фильтра

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

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

Вот иллюстрация входа и выхода SVG-фильтра:

Вход фильтра SVG обычно указывается в атрибуте элемента фильтра in. Вот пример:

　<feGaussianBlur stdDeviation="3" in="SourceGraphic" />

Если необходимо использовать выход фильтра SVG в качестве входа для другого фильтра,则需要向 элементу фильтра result добавить атрибут. Вот пример:

<feGaussianBlur stdDeviation="3" in="SourceGraphic" result="blur"/>

Теперь, другой SVG фильтр может использовать выход этого фильтра, установив значение blur в его атрибуте in. В предыдущем примере значение blur указано в атрибуте result фильтра.

Размер фильтра

Размер фильтра устанавливается с помощью атрибутов x, y, width и height.

Атрибуты x и y интерпретируются относительно x и y формы, используемой в качестве входа. Из-за того, что выход некоторых фильтров обычно больше, чем вход (например, размытие вокруг формы), обычно необходимо использовать отрицательные значения для x и y, чтобы избежать обрезки добавленных фильтром графиков.

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

комбинированные фильтры

Вы можете использоватьКомбинирование элементов фильтра. Вот пример:

<svg width="500" height="100">
<defs>
　　　　<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
　　　　　　　　<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
　　　　　　　　<feGaussianBlur in="offset2" stdDeviation="3" result="blur2" />
　　　　　　　　<feMerge>
　　　　　　　　　　　　<feMergeNode in="blur2" />
　　　　　　　　　　　　<feMergeNode in="SourceGraphic" />
　　　　　　　　</feMerge>
　　　　</filter>
</defs>
<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" />　
</svg>

Этот пример создает SVG фильтр, который содержит два фильтра: <feOffset> и <feGaussianBlur>. Эффект смещения фильтра (feOffset) действует на канал Alpha применяемой к форме. Гауссовый размытие (feGaussianBlur) действует на выход смещения фильтра.

Элемент <feMerge> комбинирует выход размытого фильтра с исходной графикой. Входные данные комбинируются в порядке их появления в элементе <feMerge>. Таким образом, последующие входные данные отображаются поверх предыдущих. Результатом является то, что форма изображения выглядит как с тенью. Эффект изображения после выполнения:

Гауссовый размытый фильтр

Гауссовый размытый фильтр SVG может размыть форму SVG. Гауссовый размытый фильтр состоит изЭлемент <feGaussianBlur> представляет. Вот пример:

<svg width="500" height="250">
<defs>
　　　　<filter　id="blurFilter4"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter4);"　/>
</svg>

В этом примере определен фильтр <filter> с внутренним <feGaussianblur>. Затем определен зеленый прямоугольник, который использует этот фильтр через свойство CSS filter. Вот полученное изображение:

Размер размытия

Элемент <feGaussianBlur> имеет атрибут stdDeviation, который определяет, на сколько размыть форму, к которой применяется фильтр. Чем больше число, тем более размытой становится форма. Вот примеры с различными значениями stdDeumation:

<svg width="500" height="250">
<defs>
　　　　<filter　id="blurFilter5"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="2"　/>
　　　　</filter>
　　　　<filter　id="blurFilter6"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="6"　/>
　　　　</filter>
　　　　<filter　id="blurFilter7"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceGraphic"　stdDeviation="12"　/>
　　　　</filter>
</defs>
<rect　x="20"　y="24"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter5);"　/>
<rect　x="150"　y="24"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter6);"　/>
<rect　x="300"　y="24"　width="90"　height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter7);"　/>
</svg>

Эффект изображения после выполнения:

Обратите внимание, как прямоугольник становится все более размытым, что зависит от значения stdDeumation属性 фильтра, которое применяется к нему.

Размытие Alpha-канала

В примере выше используется SourceGraphic в качестве входа, что означает, что RGB-цвета формы используются в качестве входа фильтра. Вы можете вместо этого использовать Alpha-канал формы в качестве входа, установив значение SourceAlpha в атрибуте in элемента <feGaussianBlur>. Вот пример:

<svg width="500" height="250">
<defs>
　　　　<filter　id="blurFilter8"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feGaussianBlur　in="SourceAlpha"　stdDeviation="10"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke:　none;　fill:　#00ff00;　filter:　url(#blurFilter8);"　/>　
</svg>

Эффект изображения после выполнения:

Обратите внимание, что даже если прямоугольник определен зеленым наполнением, выход фильтра также будет черным и белым. Это происходит, когда Гауссовый размытый фильтр применяется к каналам Alpha, а не к графическим (RGB) каналам.

Отдаление фильтр

Отдаление фильтр принимает один вход и перемещает его в выходе. То есть, он может перемещать форму вверх, вниз, влево и вправо. Таким образом, его работа аналогична преобразованию, но она выполняется в фильтре. Вот пример:

<svg width="500" height="250">
<defs>
　　　　<filter　id="offsetFilter1"　x="-20"　y="-20"　width="200"　height="200">
　　　　　　　　<feOffset　in="SourceGraphic"　dx="80"　dy="20"　/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke:　#000000;　fill:　none;　filter:　url(#offsetFilter1);"　/>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: #000000; fill: none; " />
</svg>

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

Эффект изображения после выполнения.

Фильтр смещения, по-видимому, также оказывает влияние на форму (некоторое размытие), но я не уверен, почему это происходит. Я до сих пор не нашел никакого объяснения, почему это происходит.

Фильтр матрицы цвета

Фильтр матрицы цвета может применяться для преобразования матрицы к цвету формы. Вот пример:

<svg width="500" height="250">
<defs>
　　　　<filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
　　　　　　　　<feColorMatrix in="SourceGraphic" type="matrix"
　　　　　　　　　　　　　　　　values="0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　　　　　　　　　0 0 0 1 0
　　　　　　　　　　　　　　　　"/>
　　　　</filter>
</defs>
<rect x="20" y="20" width="90" height="90"
　　　　　　style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" />
</svg>

Значения матрицы предоставляются в атрибуте values элемента <feColorMatrix>. В всего должно быть 4 x 5 = 20 значений. Эти значения будут применяться к цвету исходной формы, как показано ниже:

　0 0 0 red     0
　0 0 0 green 0
　0 0 0 blue    0
　0 0 0 1        0

Эффект изображения после выполнения:

Внимание: результаты фильтров матрицы цвета в Chrome и Firefox могут быть странными. В上面的 прямоугольнике цвет указан за счет заливки, но после выполнения фильтра матрицы цвета остается только контур.

Смешанные фильтры

Смешанные фильтры могут комбинировать входные данные из нескольких фильтров в один. Вот пример:

<svg width="500" height="250">
　　<defs>
　　　　<filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
　　　　　　<feOffset in="SourceAlpha" dx="3" dy="3" result="offset3"/>
　　　　　　<feGaussianBlur in="offset3" stdDeviation="3" result="blur3"/>
　　　　　　<feBlend in="SourceGraphic" in2="blur3" x="-10" width="160"/>
　　　　</filter>
　　</defs>
　　<ellipse cx="55" cy="60" rx="25" ry="15"
　　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　　filter: url(#blurFilter3);" />
</svg>

Этот пример объявляет фильтр, использующий три эффекта фильтрации. Два первых - это привязанные смещения и эффект размытия Гаусса. ТретийТребуются два входных параметра (in и in2) и их смешение в одно.

Полученный эффект очень похож на эффект комбинированного фильтра, описанного ранее в этой статье.