如何使用过滤器创建 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 的某些值会导致 anomalies/moire-like 伪影 - 显然 1.001 是本例中的其中之一。如果将 baseFrequency 调整为 0.98，问题就会消失。

如何使用过滤器创建 svg 行

How to create a svg line with a filter

javascript

svg

polyline

svg-filters