Эффекты фильтров

Бывают ситуации, когда базовые фигуры не обеспечивают достаточную гибкость для достижения нужного эффекта. Например, реалистичные тени нельзя создать с помощью комбинации градиентов. Фильтры — это механизм SVG для создания сложных эффектов.

Простой пример — добавление эффекта размытия к содержимому SVG. Хотя базовое размытие можно создать с помощью градиентов, для всего остального необходим фильтр размытия.

Пример

Фильтры определяются элементом <filter>, который следует поместить в раздел <defs> файла SVG. Между тегами фильтра размещается список примитивов: базовых операций, которые используют результаты предыдущих операций (например, размытие, добавление эффекта освещения и т. д.). Чтобы применить созданный фильтр к графическому элементу, задайте атрибут filter.

<svg
  width="250"
  viewBox="0 0 200 85"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <defs>
    <!-- Filter declaration -->
    <filter
      id="MyFilter"
      filterUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="200"
      height="120">
      <!-- offsetBlur -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />

      <!-- litPaint -->
      <feSpecularLighting
        in="blur"
        surfaceScale="5"
        specularConstant=".75"
        specularExponent="20"
        lighting-color="#bbbbbb"
        result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite
        in="specOut"
        in2="SourceAlpha"
        operator="in"
        result="specOut" />
      <feComposite
        in="SourceGraphic"
        in2="specOut"
        operator="arithmetic"
        k1="0"
        k2="1"
        k3="1"
        k4="0"
        result="litPaint" />

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="litPaint" />
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
    <path
      fill="none"
      stroke="#D90000"
      stroke-width="10"
      d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
    <path
      fill="#D90000"
      d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
    <g fill="white" stroke="black" font-size="45" font-family="Verdana">
      <text x="52" y="52">SVG</text>
    </g>
  </g>
</svg>

Шаг 1

<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />

<feGaussianBlur> принимает in "SourceAlpha" — альфа-канал исходной графики; применяет размытие с радиусом 4; и сохраняет result во временном буфере с именем "blur".

Шаг 2

<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />

<feOffset> принимает in "blur", созданный ранее; смещает результат на "4" вправо и на "4" вниз; и сохраняет result в буфере "offsetBlur". Первые два примитива создали тень.

Шаг 3

<feSpecularLighting
  in="offsetBlur"
  surfaceScale="5"
  specularConstant=".75"
  specularExponent="20"
  lighting-color="#bbbbbb"
  result="specOut">
  <fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>

<feSpecularLighting> принимает in "offsetBlur", создаёт эффект освещения и сохраняет result в буфере "specOut".

Шаг 4

<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />

Первый <feComposite> принимает in "specOut" и "SourceAlpha", маскирует результат "specOut", чтобы он не превышал "SourceAlpha" (исходную графику), и перезаписывает result "specOut".

Шаг 5

<feComposite
  in="SourceGraphic"
  in2="specOut"
  operator="arithmetic"
  k1="0"
  k2="1"
  k3="1"
  k4="0"
  result="litPaint" />

Второй <feComposite> принимает in "SourceGraphic" и "specOut", накладывает результат "specOut" поверх "SourceGraphic" и сохраняет result в "litPaint".

Шаг 6

<feMerge>
  <feMergeNode in="offsetBlur" />
  <feMergeNode in="litPaint" />
</feMerge>

Наконец, <feMerge> объединяет "offsetBlur" (тень) и "litPaint" (исходную графику с эффектом освещения).

Source graphic

Исходная графика

Primitive 1

Примитив 1

Primitive 2

Примитив 2

Primitive 3

Примитив 3

Primitive 4

Примитив 4

Primitive 5

Примитив 5

Primitive 6

Примитив 6

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Filter_effects