css - SVG 路径的手绘(蜡笔)风格？-6ren

css - SVG 路径的手绘(蜡笔)风格？

转载作者：技术小花猫更新时间：2023-10-29 11:48:35

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

enter image description here

是否可以为 SVG 路径实现手绘(蜡笔)风格？

enter image description here

最佳答案

你可以尝试使用 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)"/>

关于css - SVG 路径的手绘(蜡笔)风格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30229943/