SVG - фильтры

SVG использует элемент <filter> для определения фильтров. Элемент <filter> использует атрибут id для его уникальной идентификации. Фильтры определяются внутри элементов <def>, а затем на них ссылаются графические элементы по их идентификаторам.

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

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - фильтр падающих теней
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Декларация

Ниже приводится объявление синтаксиса <filter>элемент. Мы показали только основные атрибуты.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Атрибуты

Sr.No.	Имя и описание
1	filterUnits- единицы для определения области действия фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих подобласть фильтра. Если filterUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'filter'. Если filterUnits = "objectBoundingBox", значения представляют собой значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент 'filter'. По умолчанию - userSpaceOnUse.
2	primitiveUnits- единицы для определения области действия фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих подобласть фильтра. Если filterUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'filter'. Если filterUnits = "objectBoundingBox", значения представляют собой значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент 'filter'. По умолчанию - userSpaceOnUse.
3	x- координата по оси X ограничивающего прямоугольника фильтра. Неисправность - 0.
4	y- координата по оси ординат ограничивающего прямоугольника фильтра. По умолчанию 0.
5	width- ширина рамки фильтра. По умолчанию 0.
6	height- высота ограничивающей рамки фильтра. По умолчанию 0.
7	filterRes - числа, представляющие области фильтра.
8	xlink:href - используется для обозначения другого фильтра.

пример

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <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>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Два элемента <filter>, определенные как filter1 и filter2.
Эффект фильтра feGaussianBlur определяет эффект размытия с помощью степени размытия с помощью stdDeviation.
in = "SourceGraphic" определяет, что эффект применим ко всему элементу.
Эффект фильтра feOffset используется для создания эффекта тени. in = "SourceAlpha" определяет, что эффект применим к альфа-части графики RGBA.
Элементы <rect> связывают фильтры с помощью атрибута filter.

Вывод

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра изображения SVG напрямую, без каких-либо плагинов. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Фильтр с эффектом тени

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <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>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Вывод