стиль ручного рисования (карандаш) для пути SVG?

Question

Путь SVG обычно выглядит как сплошная линия:

Можно ли реализовать ручной рисунок (карандаш) стиль для пути SVG?

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)"/>

Answer 2

Если вы не хотите края обрезаются и хотите получить более твердый удар, затем вы можете настроить настройки Akshay, установив filterUnits в userSpace и уменьшив масштаб смещения следующим образом:

<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)"/>