Учебники

SVG — Фильтры

Январь 15, 2019

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> . Мы показали только основные атрибуты. 

 <фильтр
    filterUnits = "единицы для определения области эффекта фильтра"
    primitiveUnits = "единицы для определения субрегиона примитивного фильтра"
   
    х = "координата оси х" 
    y = "координата оси Y"     
   
    ширина = «длина»
    высота = «длина»
   
    filterRes = "числа для области фильтра"
    xlink: href = "ссылка на другой фильтр">
 </ Фильтр>

Атрибуты

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 — координата оси y ограничивающей рамки фильтра. По умолчанию 0.
5 ширина — ширина ограничительной рамки фильтра. По умолчанию 0.
6 высота — высота ограничительной рамки фильтра. По умолчанию 0.
7 filterRes — числа, представляющие области фильтра.
8 xlink: href — используется для ссылки на другой фильтр.

пример

testSVG.htm 

 <HTML>
    <title> SVG Filter </ title>
    <Тело>
   
       <h1> Пример фильтра SVG </ h1>
   
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <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" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект размытия): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter1)" />      
          </ Г> 
         
       </ SVG>
   
    </ Body>
 </ Html>

  • Два элемента <filter> определены как filter1 и filter2.

  • Эффект фильтра feGaussianBlur определяет эффект размытия в зависимости от степени размытия с использованием stdDeviation.

  • in = «SourceGraphic» определяет, что эффект применим ко всему элементу.

  • Эффект фильтра feOffset используется для создания эффекта тени. in = «SourceAlpha» определяет, что эффект применим для альфа-части графики RGBA.

  • Элементы <rect> связывают фильтры, используя атрибут filter.

Два элемента <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>
    <Тело>
      
       <h1> Пример фильтра SVG </ h1>
      
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <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" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект тени): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter2)" />
          </ Г>
         
       </ SVG>
   
    </ Body>
 </ Html>

Выход

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

55
Share: