SVG扩张/侵蚀过滤器与Illustrator偏移路径

下面是在Chrome 22.0.1229.79 Mac上呈现的SVG图像的屏幕截图。原始svg位于JSFIDLE上：

左边的图像是使用SVG:s扩展和腐蚀过滤器制作的。右图是使用Illustrator的偏移路径效果制作的

左图有问题：底部的边界扭曲，曲线不平滑。同时，两种颜色的厚黑色边框是相同的

我的SVG的某些参数是否有误，或者“扩展”和“腐蚀”过滤器是否看起来有问题？

编辑：目的是使SVG中的路径变薄或变厚，但根据本例，腐蚀/扩张不够稳定，无法依赖

---

过滤效果是在像素数据（光栅化路径）上完成的，而Illustrator中的路径偏移操作（与Inkscape中类似）是使用原始路径数据（或矢量数据，如果需要）完成的

---

前者类似于使用photoshop过滤器，后者通过使用现有路径创建新路径。它们都是稳定的，但不是相同的操作。

Illustrator的路径偏移和SVG过滤器腐蚀/扩张是不同的操作

这个腐蚀过滤器按设计工作-这里没有bug。对于输入图像中的每个像素，过滤器将在其周围的矩形（半径）中查看最大RGBA值。在正常图像中，由于缺少更好的术语，这往往会生成“矩形高光”。当应用于曲线绘制路径时，会产生奇怪的瑕疵。根据规范：

膨胀（或侵蚀）内核是一个宽度为的矩形 2*x半径和2*y半径的高度。在放大中，输出像素 是相应R、G、B、A的单个分量最大值 输入图像的内核矩形中的值。在侵蚀中，输出 pixel是对应图像的单个分量最小值 R、 输入图像的内核矩形中的G、B、A值

---

所以，想象一下，在你的形状的尖端的单个像素。过滤器中有一个10像素的“半径”（记住半径是一个令人难以置信的误导性术语，因为它使用的是矩形而不是圆形！）。让我们假设它在100100，为了争论。当过滤器处理90110到110110范围内像素的值时，其扩张半径将在100100检测该像素，并将该范围内的所有像素涂成黑色。就像那样，你漂亮的尖端已经被放大成一条直线。

请注意，你可以使用嵌套笔划（其中一些笔划具有修剪路径内部或外部的遮罩）实现大多数偏移路径效果

例如，以下是以这种方式重新实现的OP路径：

这澄清了很多！你知道吗，不同浏览器的结果是相同的还是几乎相同？我指的是腐蚀和扩张过滤器的视觉效果。我已经在所有可用浏览器（最新的Opera、Chrome、Firefox）中测试了示例图像所有这些都产生了相同的结果。因此dilade和腐蚀过滤器背后的逻辑似乎在所有这些过滤器中都是相同的。在将Illustrator偏移路径效果应用于形状之后，一个有趣的/重要的事情是原始路径未被修改，并且拖动手柄位于原始路径的点上。偏移量可以修改之后，这意味着偏移路径的功能与SVG的腐蚀和扩展过滤器类似。并使偏移路径效果永久（从而修改原始路径）您必须单击“对象-展开外观”。这可能进一步澄清了Illustrator Effect和SVG过滤器之间的区别。侵蚀和扩张过滤器是使用SVG过滤器实现的。其行为（以及所有）过滤器是在SVG规范中定义的。所有实现的结果都应该相同。当然，除了浏览器实现中是否存在缺陷之外。感谢规范！如果可能的话，我对腐蚀和扩张秘密的理解水平将很快超过认知的极限。