Scribbled SVG行嗎？

Question

有沒有辦法讓一條線，多邊形，...看起來像是被塗鴉或手繪的？

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <line x1="10" y1="20" x2="200" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> 
</svg> 

Answer 1

當然，將行分成幾行（或使用具有儘可能多段的路徑）。編寫一個腳本可以爲每個路徑段的點添加一點隨機性，這應該相當簡單。另一種方法是使用SVG濾鏡，這樣的例子：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <filter color-interpolation-filters="sRGB" x="-0.15" width="1.3" y="-0.15" height="1.3" id="squiggle"> 
      <feTurbulence baseFrequency="0.03" type="fractalNoise" seed="47" numOctaves="4" /> 
      <feGaussianBlur stdDeviation="2" /> 
      <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="23.5" /> 
      <feGaussianBlur stdDeviation="1" /> 
     </filter> 
     <style> 
      line, circle { 
       fill: none; 
       stroke: rgb(99, 99, 99); 
       stroke-width: 2; 
       filter: url(#squiggle); 
      } 
      text { 
       filter: url(#squiggle); 
       fill: rgb(99, 99, 99); 
       font: 36px italic; 
      } 
     </style> 
    </defs> 
    <line x1="10" y1="20" x2="200" y2="300" /> 
    <circle cx="100" cy="70" r="25" /> 
    <line x1="150" y1="30" x2="100" y2="300" /> 
    <text x="170" y="80">Squiggly!</text> 
</svg> 

見fiddle。這是另一個example。