如何在不使用Javascript或扩展/侵蚀过滤器的情况下在SVG中实现偏移路径效果？

Question

我有一个很长一段时间的项目:一个基本的矢量图形工具,它在浏览器中运行并使用SVG和Javascript(也许你已经在其他地方看到了其中的一些).该工具只有非常有限的功能集,因为受众受限制且目的非常具体,事实上不允许其他功能超出明确允许的范围(您知道).一个遗漏的特征是侵蚀(也称为插入或薄)和扩张(开始,加粗,加粗)多边形和其他图形元素.

我多次使用Adobe Illustrator的偏移路径效果,使用它我可以轻松地复制稀疏或加厚的图形对象,而不会影响原始对象,因此几乎可以支持程序.

我试图在SVG中使用相同的功能,但没有成功.

我尝试过以下方法:
- 扩展和侵蚀过滤器,但结果不令人满意(请参见此处图像)
- 服务器端Python的Shapely库,但这种解决方法太慢,只允许插入或开始基本多边形(描述)这里)
- 找到javascript库/代码/函数,它可以改变图形元素的路径数据,但没有找到javascript

那么有没有任何有意义的方法来实现这一点,如偏移路径效应和如何？

Answer 1

这是一个"回答你自己的问题 - 分享你的知识,问答风格 "的答案,但如果你有更好的答案,请自由使用你的键盘.

我只使用了SO几天,所以请不要低估我的差距.我对这个问题有一个有趣的解决方法,它基于可变宽度笔划和蒙版.

但是,让我们从你(或我)的第一个想法开始吧.当我们要在SVG中侵蚀(瘦)图形对象时,首先想到的是使用erode过滤器:

但是因为腐蚀过滤器(以及扩张)使用像素数据(光栅化路径),所以在所有情况下结果都不好看.事实上,当用于过滤矢量对象时,我从未见过好看的腐蚀.看到口和嘴:

扩张过滤器有类似的问题(鼻子不好,棒球帽是斗乱和其他一些不一致):

Adobe Illustrator的所有用户都知道好的路径效果,可用于将各种路径操作应用于形状(对象).这些效果不会更改原始路径数据,它们只会创建对象的修改副本.其中最有用的是偏移路径效果,它可用于从指定距离(或类似的东西)中选择对象.SVG:侵蚀和扩张滤镜与Illustrator的偏移路径效果有相似之处,但质量与矢量操作(相对于位图)一样高.

它SVG格式的当前状态,缺乏对插画般的偏移路径的支持,但它可能获得使用可变宽度的笔触和口罩同样指出相同的功能在这里.

让我们深入了解SVG蒙版的世界.通过简单地增加行程宽度可以实现扩张(或开始路径或变厚),但是侵蚀(或插入路径或变薄)需要更多的东西,例如掩模.在SVG中,任何图形对象或'g'元素都可以用作alpha掩码,用于将当前对象合成到背景中(W3C SVG 1.1 Recommendation).

上述意味着不仅可以将对象的填充用作遮罩,还可以用作笔划.并且调整用作遮罩的路径的笔划宽度,我们可以控制当前对象(使用遮罩属性将遮罩应用到其中)的多少被遮盖掉.

让我们来看一个使用mask的例子.首先我们在SVG中定义一个路径:s defs元素:

<defs>
<path id="head_path" d="M133.833,139.777c1 ...clip... 139.777z"/>
</defs>

当我们在defs元素中定义路径时,它消除了在文档的其他部分中重复相同数据的需要.path的id属性用于引用文档某些点的路径.

现在我们可以在掩码中使用此路径数据:

<defs>
...
<mask id="myMask" maskUnits="userSpaceOnUse">
<use xlink:href="#head_path" fill="#FFFFFF" stroke="#000000" 
stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
...
</defs>

'use'元素引用'path'元素,其id为'head_path',并指示'head_path'元素的图形内容(在本例中仅为路径数据)包含在此掩码中.在上面的'use'元素上定义的笔触宽度将是偏移(侵蚀)效果的量.这个数量被掩盖在元素之外,以便我们接下来要绘制.

好的,让我们首先画出"头部",不要掩饰,看看它有多漂亮:

...
</defs>
<use x="5" y="5" xlink:href="#head_path" fill="#4477FF" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

这会产生以下形状:

现在测试一下,使用mask可以实现什么:

...
</defs>
<use x="5" y="5" xlink:href="#head_path" fill="#22EE22" stroke="black"
stroke-width="21" stroke-linecap="round" stroke-linejoin="round"
mask="url(#myMask)"/>

上述'use'元素被指示使用'myMask'作为掩码,'head_path'作为图形内容.蒙版效果应用于'use'元素,并绘制以下形状:

如果我们将两者叠加在每个上面,我们可以将原始头部与蒙面头部进行比较:

一点也不差？让我们将使用SVG侵蚀过滤版本的第一次尝试与屏蔽版本进行比较:

左边的一个被侵蚀过滤,右边的一个被模仿以模仿类似Illustrator的偏移路径效应.帽子和嘴巴没有奇怪的文物!

扩张呢？有没有办法消除棒球帽鼻子和油腻的路径不忠？当然.而且这种方法非常简单但有点破解.幸运的是,没有必要使用面具.相反,我们可以调整笔画宽度以达到预期的效果.并且由于笔划已经用于螺栓固定,为了在螺栓形状周围获得黑色笔划(如果需要),我们必须添加一个具有更宽行程的元素的附加副本并将其放置在螺栓形状下方:

<!-- To get the black stroke -->
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="black"
stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
<!-- To get the boldened shape -->
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="red"
stroke-width="21" stroke-linecap="round" stroke-linejoin="round"/>

这会产生以下形状:

这里原始形状和应用了我们的自定义偏移路径效果的形状:

我们的定制螺栓与扩张过滤器相比如何:

左侧(上方)使用SVG:扩张过滤器扩张,右侧使用我们的自定义偏移路径效应进行加粗.很好,我喜欢.路径忠实地遵循给定距离处的原始路径,并且没有棒球帽上的刮擦迹象.

最后让我们将所有电线拉到一起:

左边(上面)使用SVG的扩张/侵蚀过滤器,右边使用Illustrator模拟的偏移路径效果,这是使用SVG蒙版和更粗的笔划实现的.你会选择哪一个？

结论:我们不会被迫使用Javascript或其他脚本来加粗或缩小SVG中的图形元素.SVG的侵蚀和扩张过滤器可能有一些使用目的,但它们不适合高质量的路径"修改".使用面具有点复杂,但经过一些实验后你就会熟悉它们.我真的希望SVG在未来能够原生支持Offset Path Effect,而不会像黑客那样使用它.

我讨论了这些例子中使用的形状,你可以使用过滤器和面具:http://jsfiddle.net/7Y4am/
(至少测试以改变笔画宽度!)

(对不起,我的英语不好,让母语人士笑到死,但请记住,我属于人类的94%,不会说英语.但幸运的是我们有谷歌翻译.)