jquery - SVG粉笔线的麻烦

Question

对于一个项目，我想在 SVG 矩形对象周围绘制粉笔状边框。我设法在 4 像素宽的线上添加了一个图案，这确实有点像粉笔，但我实际上正在考虑让这条线变得更加真实。

到目前为止，我尝试的是在 Illustrator 中创建类似粉笔的纹理并将其导出到 SVG，但是如何才能将此 SVG 文件作为模式导入到现有的 SVG 中，而无需手动复制所有路径信息呢？如何使该纹理尽可能高效，以便查看器不必加载 23 MB 的路径信息？

希望大家能帮帮我。

干杯，

隐藏

附注这是我到目前为止所想出的:

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