如何使用过滤器创建 svg 行

Question

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

以上内容是使用以下内容创建的：

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

Above in Fiddle

这种方法不适用于我想做的大部分事情。 效果会根据线条的长度和方向而变化。

我能想到的唯一方法是用多边形替换所有线条。那么这将是过滤器的直接使用。但是我必须创建一个复杂的多边形，其中包含每个角和曲线的所有计算。

所以在我这样做之前，我想知道是否有办法通过 svg 折线或其他方法实现上述目标。

编辑：Michael Mullany 的回答解决了仅垂直和水平行的问题，但我仍然遇到某些行的效果不同的问题，请参见下面的示例。左上角的通知效果降低。有没有办法对所有行产生一致的效果？

Answer 1

默认过滤器尺寸不适用于水平和垂直线，因为它们具有零区域边界框。您需要将过滤器单位更改为：

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

否则这个过滤器很好。

更新：baseFrequency 的某些值会导致异常/类似莫尔条纹的伪影 - 显然 1.001 是这种情况下的其中之一。如果将 baseFrequency 调整到 0.98，问题就会消失。