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

Question

下面是在Chrome 22.0.1229.79 Mac上呈现的SVG图像的屏幕截图。原始的svg在jsfiddle上： http://jsfiddle.net/LGBk5/

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

左边有问题：底部边框扭曲，曲线不平滑。与此同时，厚黑色边框在两者中都是相同的。

我的SVG有些参数错误，或是扩张和侵蚀过滤器看起来像马车？

编辑：目的是在SVG中使路径更薄或更厚，但根据这个例子，侵蚀/扩张不够稳定，不能依赖。

Answer 1

滤镜效果在像素数据（光栅化路径）上完成，而Illustrator中的路径偏移操作（类似于Inkscape）则使用原始路径数据（或矢量数据，如果您愿意）完成。

前者就像使用photoshop过滤器一样，后者通过使用现有路径创建新路径。它们都很稳定，但它们的操作并不相同。

Answer 2

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

此侵蚀过滤器按设计工作 - 此处没有错误。对于输入图像中的每个像素，过滤器会查看其周围矩形（半径）中的最大RGBA值。在正常图像中，由于缺少更好的术语，这往往会产生“矩形高光”。当应用于弯曲的绘制路径时会导致奇怪的伪影。来自规范：

  

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

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

Answer 3

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

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

＆＃13;

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;