как сделать svg фильтр рассеяния? - PullRequest
Новая
       13

как сделать svg фильтр рассеяния?

0 голосов
/ 31 октября 2018

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

Пример: белый круг на черном фоне → Мессье 92 (извините, у меня недостаточно репутации для встраивания изображения)

Следовательно, форма, отличная от круга, все еще должна быть узнаваемой. Вот лучшее, что я смог сделать:

Я бы назвал такой эффект фильтром scatter . Пожалуйста, скажите мне, если у вас есть лучшее имя. 

<svg height='100' width='100'>
  <filter id="cluster" filterUnits="userSpaceOnUse">
    <feGaussianBlur in="SourceGraphic" result='blurred' stdDeviation="10" />
    <feTurbulence type="turbulence" baseFrequency="9" numOctaves="4" result="turbulence" /> 
    <feDisplacementMap in2="turbulence" in="blurred" scale="10" xChannelSelector="R" yChannelSelector="G"  />
  </filter>
  <rect x='0' y='0' height='100' width='100' fill='black' />
  <circle cx='50' cy='50' fill='white' r='30' filter='url(#cluster)' />
</svg>

Это в основном причудливое размытие. Результаты выглядят лучше с увеличением scale в feDisplacementMap. 

<svg height='100' width='100'>
  <filter id="cluster" filterUnits="userSpaceOnUse">
    <feGaussianBlur in="SourceGraphic" result='blurred' stdDeviation="10" />
    <feTurbulence type="turbulence" baseFrequency="9" numOctaves="4" result="turbulence" /> 
    <feDisplacementMap in2="turbulence" in="blurred" scale="50" xChannelSelector="R" yChannelSelector="G"  />
  </filter>
  <rect x='0' y='0' height='100' width='100' fill='black' />
  <circle cx='50' cy='50' fill='white' r='30' filter='url(#cluster)' />
</svg>

Но это также смещает изображение. Могу ли я отменить это? Или не делать это в первую очередь? Может быть, используя что-то, кроме feDisplacementMap?

1 Ответ

0 голосов
/ 01 ноября 2018

Основная проблема с вашим фильтром - его очень высокая базовая частота - вам нужно набрать это значение. А fractalNoise лучше, чем турбулентность, как тип feTurbulence для рассеивающего фильтра. Пока ваша карта смещения центрирована на 0,5 канала, ваше изображение не должно смещаться в среднем в x / y. Это проблема, только если у вас есть яркая или темная карта смещения (что не относится к feTurbulence). Наконец - более высокая шкала смещения даст вам острый вид, который вы ищете - вот так.

Это может занять кучу проб и ошибок, чтобы получить точный вид, который вы хотите. Это ссылка на редактор фильтров для теней, который может дать вам некоторые идеи https://codepen.io/mullany/pen/sJopz

<svg height="220px" width="260px" viewBox="0 0 800 600">
  <defs>
    <filter id="scatter">
      <feTurbulence baseFrequency=".2" type="fractalNoise" numOctaves="3"/>
      <feDisplacementMap in="SourceGraphic" xChannelSelector="G" yChannelSelector="B" scale="300"/>
      <feComposite operator="in" in2="finalMask"/>
    </filter>
    </defs>
  
  <g filter="url(#scatter)">
  <polyline points="10,10  10,300, 300,400" transform="translate(60 60)" fill="blue"/>
  
  <polyline points="500,10  110,300, 300,400" transform="translate(260 60)" fill="red"/>
  </g>
</svg>
...