Легко настраиваемый фильтр SVG feTurbulence - PullRequest
Новая
       101

Легко настраиваемый фильтр SVG feTurbulence

0 голосов
/ 28 мая 2020

Как я могу создать плавный мозаичный шум в SVG с помощью фильтра feTurbulence или комбинации фильтров?

Я бы хотел получить аналогичный результат, как с GIMP Filters/Render/Noise/Solild Noise....

Здесь из GIMP: enter image description here

1 Ответ

1 голос
/ 28 мая 2020

Как прокомментировал Майкл Маллани: это можно сделать с помощью атрибута stitchTiles="stitch".

Об обработке этого атрибута с помощью Inkscape я нашел эту ссылку в InkScape Bugs: Пользовательский интерфейс для установки атрибута stitchTiles (feTurbulence ) отсутствует в редакторе фильтров . К сожалению, эта функция должна быть реализована с помощью InkScape v0.93 (все еще недоступно AFAIK)

Вот образец бесшовного мозаичного SVG feTurbulence с атрибутом stitchTiles="stitch": 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" height="512" width="512">
  <defs>
    <filter x="0" y="0" width="100%" height="100%" id="myStichedNoise" style="color-interpolation-filters:sRGB;">
      <feTurbulence type="fractalNoise" stitchTiles="stitch" numOctaves="4" baseFrequency="0.0125"/>
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" />
    </filter>
    <pattern id="myPattern" width="33.33333%" height="33.33333%">
      <rect width="33.33333%" height="33.33333%" style="color:#000000;filter:url(#myStichedNoise)"/>
    </pattern>
  </defs>
  <rect fill="url(#myPattern)" width="100%" height="100%"/>
</svg>
...