问题 SVG,矢量效应=“非缩放中风”和IE


据我所知,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漏洞吗?有解决方法吗?


3449
2018-04-22 08:48


起源



答案:


矢量效应是其中的一部分 SVG 1.2很小 以及即将推出的尚未完成的SVG 2规范。

IE只针对SVG 1.1,它没有矢量效果。其他的UAs有一些奇异的SVG 1.2部分,例如矢量效果,但目前没有UA实现这一点(我认为Opera 12)。

要解决它,使用javascript计算笔画应该有多宽。即计算出应用于形状的变换之间的差异,并将其反转应用于笔触宽度。当我在Firefox中实现它时,我发现它并不简单。


9
2018-04-22 08:57