Question

对于一个项目我想在SVG矩形对象周围绘制一个粉笔状的边框。我设法将一个图案添加到4px宽的线上，这确实类似于粉笔，但我实际上是在考虑使线更逼真。

我到目前为止所尝试的是在Illustrator中创建像纹理一样的粉笔并将其导出到SVG，但我怎么能在现有的SVG中将此SVG文件作为模式导入而无需手动复制所有路径信息？如何让这个纹理尽可能高效，这样观众就不必加载23 MB的路径信息？

我希望你们能帮助我。

干杯，

隐藏

P.S。这是我到目前为止所提出的：

SVG Chalk like line as far as I got

Answer 1

我建议使用svg filters，如果您只想快速试验，请在Inkscape中打开文件，选择一个矩形，然后添加“粉笔和海绵”滤镜，然后播放参数，直到你得到你满意的东西。

这只是一个开始，但你可以从中得到相当不错的结果，这是一个例子：

    <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3">
        <feTurbulence baseFrequency="0.32065" seed="115" result="result1" numOctaves="1" type="turbulence"/>
        <feOffset result="result2" dx="-5" dy="-5"/>
        <feDisplacementMap scale="10" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
        <feGaussianBlur stdDeviation="1.1169"/>
    </filter>

然后根据需要在形状和文本上使用它，例如：

    <text filter="url(#chalk)" font-size="26px" fill="white">f(x) = 4x + 7</text>
    <rect filter="url(#chalk)" width="150" stroke="#FFF" stroke-dasharray="16,4" stroke-width="4" fill="none"/>

SVG粉笔线麻烦

1 个答案: