如何用滤镜创建svg线？

Posted 2021-04-09

我想创建具有以下效果的线条。

以上是用以下方式创建的。

<svg id="svg_wrp" width="500" height="500">
    <defs>
         <filter id="crayon">
            <feTurbulence
                type="fractalNoise"
                baseFrequency="1.001"
                numOctaves="10"
                result="noise">
            </feTurbulence>
            <feDisplacementMap
                xChannelSelector="R"
                yChannelSelector="G"
                scale="50"
                in="SourceGraphic"
                result="newSource">
            </feDisplacementMap>
      <feGaussianBlur stdDeviation="1.1"/>
        </filter>
 </defs>
  <polyline    
  points="200,100 100,200"
  stroke="#000"
  stroke-width="10"
  fill="none"
  filter=url(#crayon) ></polyline>
</svg>

上图在Fiddle中

这种方法对我想做的很多事情都不适用。效果会根据线条的长度和方向而改变。

我能想到的唯一方法就是把所有的线都替换成多边形。然后就可以直接使用滤镜了。但这样我就必须创建一个复杂的多边形，并对每个角和曲线进行计算。

所以在我这样做之前，我想知道是否有办法用svg多线或其他方法来实现上述目的。

编辑：Michael Mullany的回答解决了只用垂直和水平线的问题，但我还是有一些线的效果不同的问题，请看下面的例子。注意左上角的效果降低了。有没有办法让所有线条的效果一致？

答案

默认的滤镜尺寸对水平线和垂直线不起作用，因为它们有一个零面积的边界框。你需要将你的滤镜单位改为。

<filter id="crayon" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="500">

否则这个滤镜就可以了。

更新：有一些baseFrequency的值会导致异常的moire-like伪影--显然1.001是这种情况下的其中之一。如果你把baseFrequency调整到0.98，问题就会消失。