SVG路径通常看起来像一条实线:
是否可以为SVG路径实现手绘(蜡笔)样式?
答案 0 :(得分:6)
您可以使用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)"/>
&#13;
答案 1 :(得分:5)
如果您不希望边缘被剪裁并想要更稳定的笔划,那么您可以通过在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)"/>