SVG、vector-effect="non-scaling-stroke" 和 IE

Question

据我了解，SVG 属性 vector-effect="non-scaling-stroke" 应该可以防止在缩放或拉伸 SVG 对象时笔画变形（变粗或变细）。

例如 - 在这个小提琴 (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 错误吗？有解决办法吗？

Answer 1

vector-effects 是 SVG 1.2 tiny 的一部分，也是即将推出的尚未完成的 SVG 2 规范的一部分。

IE 仅针对没有矢量效果的 SVG 1.1。其他 UA 已经从 SVG 1.2 中挑选了一些微小的部分，例如矢量效果，但当前的 UA 没有实现这一切（我认为是 Opera 12）。

要解决这个问题，请使用 javascript 确定笔画的宽度。 IE。计算出应用于形状的变换和将其倒数应用于笔画宽度之间的差异。当我在 Firefox 中实现它时，这并不简单。