SVG路径如何使用手绘风格（蜡笔）进行绘制？

Question

SVG路径通常看起来像实线： 是否可能为SVG路径实现手绘（蜡笔）风格？

- Hanfei Sun

Answer 1

您可以尝试使用svg的filter来实现此目的。

<svg width="1000" height="500">
    <defs>
    <filter id="filter" height="2" width="2">
      <feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
      <feDisplacementMap  scale="80"  xChannelSelector="R" in="SourceGraphic" />
     
    </filter>
    </defs>
    <path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>

- Akshay

Answer 2

如果你不想让边缘被剪切并希望描边更加实心，那么你可以调整Akshay的设置，将filterUnits设置为userSpace并减小位移比例，如下所示：

如果您不想要边缘被剪裁，并且希望描边更坚实，则可以通过设置filterUnits为userSpace并减少位移比例来调整Akshay的设置：

<svg width="1000" height="500">
    <defs>
    <filter id="filter" filterUnits="userSpaceOnUse" x="-5" y="-5" height="200" width="2000">
      <feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
      <feDisplacementMap  scale="8"  xChannelSelector="R" in="SourceGraphic" />
     
    </filter>
    </defs>
    <path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>

- Michael Mullany