SVG
фильтры
Поиск…
Синтаксис
- Объявление фильтра:
<filter id="filter-id"> ... список дочерних примитивов ...</filter> - Применить фильтр через атрибут SVG:
<elementname filter="url(#filter-id)" ... /> - Применить фильтр через свойство CSS: (-prefix- ) filter: url ("# filter-id");
параметры
| Элемент атрибутов | подробности |
|---|---|
| Область фильтра | Фильтрующий элемент может дополнительно определять положение, размеры, разрешение и единицы для вывода эффекта фильтра. Положение и размеры фильтра могут быть заданы с использованием следующих параметров: x, y, width, height. Значения по умолчанию не являются интуитивными и составляют: x: -10% y: -10% width: 120% height: 120% |
| Разрешение фильтра | filterRes является необязательным атрибутом в SVG 1.1, который может использоваться для указания разрешения, при котором фильтр обрабатывается. Этот атрибут имел неравномерную поддержку и теперь устарел в текущих браузерах. |
| Блоки фильтров | По умолчанию единицы и система координат для области эффектов фильтра (x, y, width, height) фильтрующего элемента установлены относительно ограничивающего блока элемента, ссылающегося на фильтр. В терминах SVG это называется «objectBoundingBox». Когда мы пишем x = «50%», это означает «установить начальную позицию x области фильтра в левой части ограничивающего блока ссылочного элемента + 50% от ширины элемента». Но вы также можете указать единицы и координаты явно, установив свойство filterUnits. Этими двумя альтернативами являются «objectBoundingBox» (по умолчанию мы только что описали) или «userSpaceOnUse». userSpaceOnUse устанавливает единицы фильтра и систему координат в холст элемента ссылки или в выражениях SVG - «userSpaceOnUse». |
| Примитивные единицы | В дополнение к единичной системе для самого фильтра вы также можете указать систему единиц, что примитивы дочерних фильтров фильтра будут использовать через атрибут primitiveUnits. Еще раз, выбор между userSpaceOnUse и objectBoundingBox. Они влияют на координаты 0,0 и значения единиц для примитивов фильтра так же, как и для фильтров. |
| Цветовое пространство | Цветовое пространство по умолчанию для SVG-фильтров - linearRGB. Дополнительный атрибут color-interpolation-filters может быть установлен в sRGB чтобы изменить цветовое пространство на более традиционное пространство sRGB. |
замечания
Большинство атрибутов фильтра могут быть доступны с помощью элемента <animate> animate <animate> , хотя вы должны использовать библиотеку «fakeSMIL» в IE для достижения тех же результатов. Анимация SMIL (элемент <animate> ) будет устаревать в пользу новой спецификации Web Animations, которая имеет очень ограниченную поддержку по состоянию на середину 2016 года.
Элементы дочернего элемента Filter - примитивы фильтров - имеют два необязательных атрибута, которые определяют цветовое пространство, в котором выполняются вычисления цветовой интерполяции: цветовая интерполяция и цвето-интерполяционные фильтры. По умолчанию для первого используется sRGB, а по умолчанию для последнего - linearRGB. Манипуляции, которые инвертируют цветовое пространство (через feColorMatrix или feComponentTransfer), могут привести к неинтуитивным результатам - для тех, которые используются в цветовом пространстве CSS sRGB. Например, инверсия цвета изображения в оттенках серого в линейном RGB приведет к выраженному смещению в сторону более белых тонов. Это можно исправить, установив значение примитива в sRGB. Эти атрибуты могут быть установлены в отдельных примитивах фильтра или унаследованы от самого элемента фильтра.
Если никакой другой вход не указан, но требуется один, первый примитив фильтра внутри фильтра примет растрированную (растровую) версию ссылочного элемента в качестве своего ввода. Последующие примитивы фильтров, ожидающие ввода, будут принимать результат непосредственно предшествующего примитива фильтра в качестве входных данных.
В сложных фильтрах может возникнуть трудность отслеживать входы и выходы (и отлаживать), если они остаются скрытыми; и это хорошая практика для явного объявления входов и выходов для каждого примитива.
Элементы фильтров SVG могут быть раздельно разделены на входы, преобразования, световые эффекты и комбинации.
Входы:
feFlood: генерирует цветовое поле
feTurbulence: генерирует широкий спектр шумовых эффектов
feImage: генерирует изображение из внешней ссылки на изображение, URI данных или ссылку на объект (ссылки на объекты не поддерживаются в Firefox по состоянию на середину декабря12)
Трансформации:
feColorMatrix: преобразует входные значения пикселя RBGA в выходные значения
feComponentTransfer: регулирует цветовую схему отдельного цветного канала
feConvolveMatrix: заменяет каждый пиксель новым пикселем, вычисленным из значений пикселей в области относительно текущего пикселя)
feGaussianBlur: заменяет текущий пиксель средневзвешенным значением пикселей в области вокруг пикселя
feDisplacementMap: перемещает каждый пиксель из текущей позиции на основе значений R, G или B из другой входной графики.
feMorphology: заменяет каждый пиксель новым пикселем, вычисленным из максимального или минимального значения всех пикселей в прямоугольной области вокруг этого пикселя.
feOffset: перемещает вход с текущего положения
Эффекты освещения:
feSpecularLighting: обеспечивает «блестящий» эффект 2D или псевдо-3D освещения
feDiffuseLighting: обеспечивает эффект «матового» 2D или псевдо-3D освещения
feDistantLight: обеспечивает отдаленный источник света для зеркального или диффузного освещения
feSpotLight: обеспечивает источник света конической секции для зеркального или диффузного освещения
fePointLight: обеспечивает точечный источник света для зеркального или диффузного освещения
Комбинации:
feMerge: создает простой составной состав из нескольких входов (включая предыдущие входы фильтра)
feBlend: смешивает несколько входов с использованием правил смешивания
feComposite: объединяет несколько входов с использованием правил набора комбинаций с учетом альфа-значений.
feTile: ввод элементов для создания повторяющегося шаблона
Другие примечания
Хотя SVG - это технология векторной графики, важно подчеркнуть, что фильтры SVG выполняют операции на уровне пикселей на всех входах (включая формы SVG) и создают растрированные (растровые) выходы на определенном уровне разрешения. Применение преобразования масштаба 10x (например) на простой кривой SVG, которая была отфильтрована при нормальном разрешении экрана, будет создавать пиксельные края, поскольку сглаживание исходного изображения было преобразовано в пиксели с помощью фильтра и увеличено. (Неясно, соответствует ли это спецификации или просто ограничению текущих реализаций)
Помните, что SVG является XML, когда вы пишете фильтры, поэтому все теги должны быть закрыты, и многие свойства и атрибуты должны быть указаны явно или фильтр не будет выполняться.
Фильтрующий элемент никогда не отображается напрямую. Он ссылается только на свойство фильтра на элемент, к которому применяется фильтр. Обратите внимание, что свойство display не применяется к элементу фильтра, и элементы не отображаются непосредственно, даже если для свойства display установлено значение, отличное от «none». И наоборот, фильтрующие элементы доступны для ссылок даже тогда, когда свойство disisplay на элементе filter или любом из его предков установлено на «none».
На фильтры SVG можно ссылаться через CSS-фильтр, хотя по состоянию на середину 2016 года через этот механизм поддерживается только подмножество примитивов, и этот механизм не поддерживается в браузерах Microsoft.
Фильтры размытия: feGaussian Blur (базовый)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="basicGaussian">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры размытия: feGaussianBlur (размытие по оси x и по оси Y отдельно)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="xAxisGaussian">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры размытия: feGaussianBlur с жесткими краями и непрозрачностью 100%
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 1"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры размытия: размытие ящика
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" >
<feConvolveMatrix order="3" kernelMatrix=" 1 1 1
1 1 1
1 1 1"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры размытия: Bokeh Blur (3 слоя, обрезанные)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="blurSource"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer result="brightness-mask" >
<feFuncA type="discrete" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<!--bokeh Layer 1 -->
<feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="5"/>
<feGaussianBlur stdDeviation="8"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 9 0" />
<feComponentTransfer result="bokeh1">
<feFuncA type="linear" slope=".5" />
</feComponentTransfer>
<!--bokeh Layer 2 -->
<feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh2">
<feFuncA type="linear" slope=".3" />
</feComponentTransfer>
<!--bokeh Layer 3 -->
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="18"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh3">
<feFuncA type="linear" slope=".2" />
</feComponentTransfer>
<!--Merge -->
<feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
<feBlend mode="lighten" in2="bokeh1"/>
<feMorphology operator="erode" radius="0" result="bokeh"/>
<feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
<feComposite operator="over" in="bokeh"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Теневые фильтры: базовый Dropshadow
<svg width="800px" height="600px">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="red"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
</svg>
Теневые фильтры: Внутреннее свечение
<svg width="800px" height="600px">
<defs>
<filter id="inner-glow">
<feFlood flood-color="red"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Теневые фильтры: сложная дробина (контурная, шумная, формованная)
<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="2.8"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
Фильтры цветного манипулирования: основные оттенки серого
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры цветной манипуляции: оттенки серого (только зеленый канал)
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры цветного манипулирования: монотонные
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values=".2 .2 .2 0 0
.6 .6 .6 0 0
.2 .2 .2 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры размытия: размытие фокуса (гауссовское)
<svg width="800px" height="600px">
<defs>
<filter id="focus-blur" >
<feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
<feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
</feDiffuseLighting>
<feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
<feComponentTransfer in="alphaMap" result="invertlight">
<feFuncA type="table" tableValues="1 0 0"/>
</feComponentTransfer>
<feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
<feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
<feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
<feComposite operator="over" in="infocus" in2="outfocus"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Исходное изображение Daderot в Викискладе)
Фильтры цветного манипулирования: плакат
<svg width="800px" height="600px" >
<defs>
<filter id="posterize" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>
Фильтры размытия: выделить размытие
Этот фильтр выбирает только области высокой яркости графического изображения источника, размывает содержимое и компонует размытое содержимое поверх оригинала.
<svg width="800px" height="600px">
<defs>
<filter id="highlightblur" color-interpolation-filters="sRGB">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
<feComponentTransfer in="lumMap" result="highlightMask">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
<feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
<feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
</filter>
</defs>
<image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
/>
</svg>