SVG膨胀/侵蚀滤镜与Illustrator偏移路径 [英] SVG dilate/erode filter vs. Illustrator Offset Path

问题描述

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

Below is a screen capture of SVG image which is rendered on Chrome 22.0.1229.79 Mac. The original svg is on jsfiddle: http://jsfiddle.net/LGBk5/

左图是使用SVG的膨胀滤镜和腐蚀滤镜制作的.右图是使用Illustrator的偏移路径"效果制作的.

The left image is made using SVG:s dilate and erode filters. The right one is made using Illustrator's Offset Path effect.

左侧有问题:底部的边框变形并且曲线不那么平滑.同时两者的黑色粗边框相同.

The left one has problems: the border at the bottom is distorted and curves are not as smooth. Meanwhile the thick black border is the same in both.

我的SVG参数是否错误，或者扩张过滤器和腐蚀过滤器看起来像是越野车?

目的是在SVG中使路径变细或变粗，但是根据此示例，腐蚀/膨胀并不足够可靠.

The purpose is to make paths thinner or thicker in SVG, but according to this example, the erode/dilate is not stable enough to rely.

推荐答案

滤镜效果是对像素数据(栅格化路径)完成的，而Illustrator中的路径偏移操作(与Inkscape类似)是使用原始路径数据完成的(或向量数据(如果需要).

Filter effects are done on pixel data (the rasterized path), while the path offset operation in Illustrator (similar in Inkscape) is done using the original path data (or vector data if you wish).

前者就像使用photoshop滤镜，后者是通过使用现有路径来创建新路径.它们都很稳定，但是操作不同.

The former is like using photoshop filters, the latter is creating new paths by using the existing path. They're both stable, but they're not the same operation.

这篇关于SVG膨胀/侵蚀滤镜与Illustrator偏移路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！