SVG路径的手绘（蜡笔）样式？

【问题标题】：hand drawing (crayon) style for SVG path?SVG路径的手绘（蜡笔）样式？
【发布时间】：2015-07-25 15:11:57
【问题描述】：

SVG 路径通常看起来像一条实线：

是否可以为 SVG 路径实现手绘（蜡笔）样式？

【问题讨论】：

【解决方案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)"/>

【讨论】：

【解决方案2】：

如果您不想剪裁边缘并且想要更实心的笔触，那么您可以通过在 userSpace 中设置 filterUnits 并减少位移比例来调整 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)"/>

【讨论】：