SVG粉笔线麻烦

对于一个项目我想绘制一个围绕SVG矩形对象的粉笔状边框。我设法将一个图案添加到4像素宽的线条上，这确实与粉笔有些类似，但我实际上正在研究使线条更逼真。SVG粉笔线麻烦

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

我希望你们能帮助我。

干杯，

隐藏

附：这是我想出迄今：

SVG Chalk like line as far as I got

来源

2012-03-16 Hidde Stokvis

我建议使用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"/>

来源

2012-03-16 13:17:34

因为我想看到这个，所以我把它放在这里：http://jsfiddle.net/kDem5/好的工作，Erik！ :)稍微调整参数，这里是一个稍微不太模糊，更严格的版本的效果：http://jsfiddle.net/kDem5/2/ – Phrogz 2012-03-16 17:08:47

而且...与背景图像和着色：http：// jsfiddle。 net/kDem5/3/...，然后改变dasharray，使笔画不那么规则：http://jsfiddle.net/kDem5/4/最后（！）用于漫画Sans，不吸：http://jsfiddle.net/kDem5/5/ – Phrogz 2012-03-16 17:17:10

伟大的工作，+1'：）' – halfer 2012-03-16 17:17:45

SVG粉笔线麻烦

回答

相关问题