Фильтры SVG

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

Фильтры работают как слои. При их создании попробуйте применять эффект и проверять результат шаг за шагом.

У этого элемента есть различные атрибуты, которые помогают создавать область отсечения. Между тегами фильтра можно определить примитивы, позволяющие реализовать нужный эффект. Один из таких примитивов — <feGaussianBlur>. Ключевое слово SourceAlpha задаёт входные данные для этого примитива. В данном случае это вход in. Степень размытия задаётся с помощью атрибута stdDeviation.

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

<defs>
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
  </filter>
</defs>

<g id="ghost" filter="url(#drop-shadow)">
  <!--Ghost drawing in here-->
</g>

Приведённый выше пример не даст желаемого результата. Вместо этого нужно добавить дополнительные примитивы фильтра, которые обеспечат нужное отображение. Добавив feoffset и result, мы определим слой эффекта.

Атрибут <result> задаёт ссылку, которую можно использовать позднее. Он существенно отличается от XML-идентификатора id: на него можно ссылаться только внутри текущего filter. Примитив <feoffset> содержит результат размытия по Гауссу. Примитив <feMerge> содержит узлы <feMergeNode>, используя в качестве входных данных результат offsetBlur. Благодаря этому они будут отображаться под sourceGraphic.

Реализация дополнительных примитивов

<defs>
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feoffset in="blur" dx="4" dy="4" result="offsetBlur" />
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>