Jquery SVG粉笔线故障
对于一个项目,我想在SVG矩形对象周围画一个粉笔状的边框。我设法在一条4倍宽的线条上添加了一个图案,这确实有点像粉笔,但我实际上是想让线条更逼真 到目前为止,我尝试的是在Illustrator中创建粉笔状纹理并将其导出到SVG,但是我如何才能在不必手动复制所有路径信息的情况下将此SVG文件作为模式导入现有SVG中呢?我怎样才能使这个纹理尽可能的高效,这样查看器就不必加载23MB的路径信息 我希望你们能帮我 干杯 隐藏 顺便说一句,到目前为止,我的想法是: 如果你只是想快速试验,我建议使用,打开你的文件,选择一个矩形,然后添加一个“粉笔和海绵”过滤器,并使用参数,直到你得到满意的结果 这只是一个开始,但您可以从中获得非常好的结果,下面是一个示例:Jquery SVG粉笔线故障,jquery,svg,design-patterns,raphael,border,Jquery,Svg,Design Patterns,Raphael,Border,对于一个项目,我想在SVG矩形对象周围画一个粉笔状的边框。我设法在一条4倍宽的线条上添加了一个图案,这确实有点像粉笔,但我实际上是想让线条更逼真 到目前为止,我尝试的是在Illustrator中创建粉笔状纹理并将其导出到SVG,但是我如何才能在不必手动复制所有路径信息的情况下将此SVG文件作为模式导入现有SVG中呢?我怎样才能使这个纹理尽可能的高效,这样查看器就不必加载23MB的路径信息 我希望你们能帮我 干杯 隐藏 顺便说一句,到目前为止,我的想法是: 如果你只是想快速试验,我建议使用,打开你
<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"/>
f(x)=4x+7
因为我想看这个,我把它放在了网上:干得好,埃里克!:)稍微调整一下参数,这里有一个稍微不那么模糊、更紧凑的效果版本:并且…有背景图像和颜色:。。。然后改变dasharray以使笔划不那么规则:最后(!)使用Comic Sans,它不会让人觉得恶心:谢谢,伙计们,做得很好,它真的帮助了我。我一直在尝试不同的图案,但除了看起来像轮胎痕迹的东西,我没能走得更远;)