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。

潦草的SVG线？

1 个答案: