SVG擴張/侵蝕過濾器與Illustrator偏移路徑

下面是在Chrome 22.0.1229.79 Mac上呈現的SVG圖像的屏幕截圖。原始svg在jsfiddle上： http://jsfiddle.net/LGBk5/SVG擴張/侵蝕過濾器與Illustrator偏移路徑

左圖是使用SVG：s擴張和侵蝕過濾器製作的。正確的是使用Illustrator的偏移路徑效果。

左側有問題：底部的邊框扭曲，曲線不平滑。與此同時，厚厚的黑色邊框在兩者中都是一樣的。

我的SVG的某些參數是否有誤或者是擴張和侵蝕濾波器如此看似是越野車？

編輯：目的是使路徑更薄或更厚的SVG，但根據這個例子，侵蝕/擴張是不夠穩定的依靠。

Illustrator Offset Path vs. SVG erode and dilate filters

來源

2012-10-03 Timo Kähkönen

過濾效果對像素數據（光柵化的路徑）來完成，而在Illustrator路徑偏移操作（Inkscape中類似）是利用原始路徑數據（或矢量數據，如果你想）來完成。

前者就像使用photoshop過濾器，後者使用現有路徑創建新路徑。他們都很穩定，但他們不是一樣的操作。

來源

2012-10-03 09:02:44

這闡明瞭很多！你知道嗎，在瀏覽器中的結果是否相同或幾乎相同？ –

什麼結果？ –

我的意思是侵蝕和擴張過濾器的視覺效果。我已經在所有可用的瀏覽器（最新的Opera，Chrome，Firefox）中測試了示例圖像，並且它們都產生了相同的結果。因此，在所有這些過濾器中，膨脹和腐蝕過濾器的邏輯似乎都是一樣的。 –

Illustrator的路徑偏移和SVG濾鏡侵蝕/擴張是不同的操作。

此侵蝕過濾器按設計工作 - 這裏沒有錯誤。對於輸入圖像中的每個像素，濾鏡都會查看其周圍矩形（半徑）中的最大RGBA值。在正常圖像中，由於缺少更好的術語，這往往會產生「矩形高光」。當應用於曲線繪製路徑時會導致奇怪的僞影。從規格：

膨脹（或侵蝕）內核是一個寬度爲 2 * x-半徑和2 * y-半徑高度的矩形。在膨脹中，輸出像素是輸入圖像的核心矩形中相應的R，G，B，A值的單獨分量方向最大值。在侵蝕中，輸出像素是輸入圖像的核心矩形中相應的R，G，B，A值的各個分量方向最小值。

所以，想象一下你的形狀尖端的單個像素。在過濾器中有一個10像素「半徑」（並記住半徑是一個令人難以置信的誤導詞，因爲它使用的不是一個圓形的矩形！）。爲了爭辯，假設它是100,100。當濾鏡處理範圍爲90,110至110,110的像素值時，其擴展半徑將檢測100,100處的像素，並將該範圍內的所有像素塗成黑色。就這樣，你的好尖端已經擴張成直線。

來源

2012-10-04 00:00:57

感謝您的規格！如果可能的話，我對侵蝕和擴張的祕密的理解水平很快就會超過認知的界限。 –

請注意，您可以使用嵌套筆觸實現大多數偏移路徑效果（其中一些具有修剪路徑內部或外部的遮罩。

例如，這裏是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>

來源

2017-07-20 12:04:27

SVG擴張/侵蝕過濾器與Illustrator偏移路徑

回答

相關問題