svg - 如何制作 svg 散点滤镜？

Question

我尝试将精确的形状变成一系列分散的点，这些点在源图像的中间具有更高的密度。

Example: White Circle on Black Background → Messier 92 (抱歉，我没有足够的声誉来嵌入图像)

因此，除圆形之外的形状仍应可识别。这是我能做到的最好的:

我将这种效果称为“分散”滤镜。请告诉我您是否有更好的名字。

<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>

这基本上是一个奇特的模糊。随着 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 以外的其他东西？

Answer 1

你的过滤器的主要问题是它的基频非常高 - 你需要把它调低。作为散射滤波器的 feTurbulence 类型，fractalNoise 比 turbulence 更好。只要您的位移贴图以​​ channel 的 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>