SVG，矢量效果 ="non-scaling-stroke"和 IE

Question

据我了解，SVG 属性 vector-effect="non-scaling-stroke"如果/当缩放或拉伸(stretch) SVG 对象时，应该防止笔画变形(变粗或变细)。

例如 - 在这个 fiddle ( http://jsfiddle.net/1cj0ovae/5/ )中，我有两个 SVG 对象；两者都比高度宽 5 倍。因为两者的 View 框都需要一个正方形，所以 SVG 被拉伸(stretch)和扭曲。

在上面的 SVG 中 - 绿色路径被扭曲了 - 它比预期的要厚得多( stroke-width="2" )。

然而，在较低的 SVG 中，红色路径“正确”显示 - 2px 粗的笔划 - 因为它具有 vector-effect="non-scaling-stroke"属性集。

这似乎在 Chrome、Safari 和 Firefox 中有效，但甚至在最新版本的 IE(例如 IE10)中也无效。

这是一个IE错误吗？有解决方法吗？

Answer 1

矢量效果是 SVG 1.2 tiny 的一部分以及即将到来且尚未完成的 SVG 2 规范。

IE 只针对没有矢量效果的 SVG 1.1。其他 UA 已经精心挑选了 SVG 1.2 的一些部分，例如矢量效果，但当前的 UA 没有实现这一切(我认为是 Opera 12)。

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