下面是在 Chrome 22.0.1229.79 Mac 上呈现的 SVG 图像的屏幕截图。原始 svg 在 jsfiddle 上：http: //jsfiddle.net/LGBk5/
左图是使用 SVG:s dilate 和 erode 过滤器制作的。右侧是使用 Illustrator 的偏移路径效果制作的。
左边有问题：底部的边框扭曲，曲线不平滑。同时，两者的粗黑边框是相同的。
我的 SVG 是否有一些参数错误，或者扩张和侵蚀过滤器看起来有问题？
编辑：目的是使 SVG 中的路径更细或更粗，但根据这个例子，腐蚀/扩张不够稳定，无法依赖。
过滤器效果是在像素数据（光栅化路径）上完成的，而 Illustrator 中的路径偏移操作（在 Inkscape 中类似）是使用原始路径数据（如果您愿意，也可以是矢量数据）完成的。
前者就像使用 Photoshop 滤镜，后者是使用现有路径创建新路径。它们都很稳定，但它们的操作不同。
Illustrator 的路径偏移和 SVG 滤镜侵蚀/扩张是不同的操作。
这个侵蚀过滤器按设计工作 - 这里没有错误。对于输入图像中的每个像素，过滤器会查看其周围矩形（半径）中的最大 RGBA 值。在正常图像中，由于缺少更好的术语，这往往会产生“矩形高光”。当应用于弯曲的绘制路径时会导致奇怪的伪影。从规范：
膨胀（或腐蚀）内核是一个矩形，宽度为 2*x 半径，高度为 2*y 半径。在膨胀中，输出像素是输入图像的内核矩形中相应 R、G、B、A 值的单个分量最大值。在腐蚀中，输出像素是输入图像的内核矩形中相应 R、G、B、A 值的单个分量最小值。
所以，想象一下你的形状尖端的那个单个像素。在您的过滤器中使用 10 像素的“半径”（请记住，半径是一个令人难以置信的误导性术语，因为它使用的是矩形而不是圆形！）。为了争论，假设它是 100,100。当过滤器处理 90,110 到 110,110 范围内的像素值时，其膨胀半径将检测 100,100 处的像素并将该范围内的所有像素涂成黑色。就这样，你漂亮的尖头已经扩张成一条直线。
请注意，您可以使用嵌套笔触（其中一些具有用于修剪路径内部或外部的蒙版）来实现大多数偏移路径效果。
例如，这是以这种方式重新实现的 OP 路径：
<!-- Left drawing is made using erode and dilate -->
<!-- Right one is made by Illustrator's Offset Path -->
<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="curve" d="M21.552,74.438c2.531-28.879,73.668-52.734,102.629-53.971
c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.236-59.594-109.5-29.5c-23.367,27.833,55.4,142.969,55.4,142.969
S18.109,113.708,21.552,74.438z"/>
<mask id="inner">
<use xlink:href="#curve" fill="white"/>
</mask>
</defs>
<!-- this black outermost line -->
<use x="10" y="10" xlink:href="#curve" style="stroke:black;stroke-width:26;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<!-- thick red outer line -->
<use x="10" y="10" xlink:href="#curve" style="stroke:#f00;stroke-width:24;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<!-- innermost black thin line, with green fill -->
<use x="10" y="10" xlink:href="#curve" style="fill:#1CFF00;stroke:black;stroke-width:32;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
<!-- blue inner stroke -->
<use x="10" y="10" xlink:href="#curve" style="fill:none;stroke:#5555FF;stroke-width:30;stroke-linejoin:miter;stroke-miterlimit:10" mask="url(#inner)"></use>
<!-- lastly, the black line -->
<use x="10" y="10" xlink:href="#curve" style="fill:none;stroke:black;stroke-width:10;stroke-linejoin:miter;stroke-miterlimit:10"></use>
<g transform="translate(210,10)">
<path fill="#FF0000" stroke="#231F20" d="M126.273,201.917c-1.188-0.766-29.407-19.044-57.679-42.532c-41.739-34.676-60.31-60.754-58.441-82.068
c1.575-17.974,18.042-34.105,48.943-47.945c21.673-9.707,48.782-16.997,65.925-17.729c1.023-0.043,2.057-0.065,3.096-0.065
c26.722,0,55.103,13.789,67.484,32.787c7.866,12.07,9.101,25.736,3.476,38.482c-8.697,19.704-20.608,29.697-35.403,29.702
c-0.002,0-0.007,0-0.01,0C144.382,112.551,127.62,95,111.407,78.028c-7.054-7.385-18.575-19.446-23.912-21.338
c-1.086,2.002-6.186,15.821,20.666,67.477c16.226,31.214,35.475,59.438,35.668,59.72l35.977,52.589L126.273,201.917z"/>
<path fill="#5555FF" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" d="M22.939,78.438
c2.531-28.879,73.668-52.734,102.629-53.971c32.164-1.373,74.764,23.746,61.766,53.197c-32,72.5-84.237-59.594-109.5-29.5
c-23.366,27.833,55.401,142.969,55.401,142.969S19.497,117.709,22.939,78.438z"/>
<path fill="#00FF00" stroke="#231F20" d="M79.986,131.678C38.498,95.796,38.41,81.397,38.549,79.807c0.289-3.29,5.843-10.151,19.371-17.933
C57.676,78.899,64.972,101.816,79.986,131.678L79.986,131.678z M163.665,84.044c-7.09,0-22.461-16.091-31.646-25.706
c-5.867-6.143-11.433-11.969-16.966-16.846c4.324-0.776,8.128-1.238,11.184-1.368c0.621-0.027,1.249-0.04,1.88-0.04
c16.911,0,36.471,8.903,43.603,19.846c3.317,5.089,2.508,8.623,1.278,11.408C168.884,80.659,165.163,84.043,163.665,84.044
L163.665,84.044z"/>
</g>
</svg>