据我了解，SVG 属性vector-effect="non-scaling-stroke"如果/当 SVG 对象被缩放或拉伸时，应防止笔划扭曲（变粗或变细）。
例如 - 在这个小提琴中（http://jsfiddle.net/1cj0ovae/5/ http://jsfiddle.net/1cj0ovae/5/），我有两个 SVG 对象；两者的宽度都是高度的 5 倍。由于两者的视图框都需要正方形，因此 SVG 会被拉伸和扭曲。
在上面的 SVG 中 - 绿色路径扭曲 - 它比预期的厚得多（stroke-width="2").
然而，在下面的 SVG 中，红色路径“正确”显示 - 2px 粗笔划 - 因为它具有vector-effect="non-scaling-stroke"属性集。
这似乎适用于 Chrome、Safari 和 Firefox，但甚至不适用于最新版本的 IE（例如 IE10）。
这是 IE 的错误吗？有解决方法吗？
矢量效应是的一部分SVG 1.2 微小 http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke以及即将推出且尚未完成的 SVG 2 规范。
IE 仅针对 SVG 1.1，它没有矢量效果。其他 UA 精选了 SVG 1.2 tiny 的部分内容，例如矢量效果，但当前没有 UA 全部实现（我认为是 Opera 12）。
要解决这个问题，请使用 javascript 确定笔画的宽度。 IE。计算出应用于形状的变换与将其倒数应用于描边宽度之间的差异。当我在 Firefox 中实现这一点时，我发现这并不简单。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
