问题描述
据我了解，如果/当缩放或拉伸SVG对象时，SVG属性vector-effect="non-scaling-stroke"应该可以防止笔触变形(变粗或变细).
As I understand it, the SVG attribute vector-effect="non-scaling-stroke" should prevent strokes from being distorted (made thicker or thinner) if/when the SVG object is scaled or stretched.
例如-在这个小提琴( http://jsfiddle.net/1cj0ovae/5/)中，我有两个SVG对象；两者的宽度都比高度高5倍.由于两者的视图框都需要一个正方形，因此SVG会拉伸和变形.
For example - in this fiddle (http://jsfiddle.net/1cj0ovae/5/), I have two SVG objects; both are 5x wider than they are tall. Because the view box of both calls for a square, the SVGs are stretched and distorted.
在上部SVG中-绿色路径失真-它的厚度比预期的要厚得多(stroke-width="2").
In the upper SVG - the green path is distorted - it's much thicker than it's supposed to be (stroke-width="2").
但是，在下部的SVG中，红色路径正确"显示-2像素粗笔画-因为它设置了vector-effect="non-scaling-stroke"属性.
In the lower SVG, however, the red path is displayed "correctly" - a 2px thick stroke - because it has the vector-effect="non-scaling-stroke" attribute set.
这似乎可以在Chrome，Safari和Firefox中使用，但即使在最新版本的IE(例如IE10)中也无法使用.
This seems to work in Chrome, Safari, and Firefox, but not in even recent versions of IE (e.g., IE10).
这是IE错误吗?有解决方法吗?
Is this an IE bug? Is there a workaround?
推荐答案
vector-effects是 SVG 1.2很小，以及即将到来且尚未完成的SVG 2规范.
vector-effects is part of SVG 1.2 tiny and the upcoming and as-yet-unfinished SVG 2 specifications.
IE仅针对没有矢量效果的SVG 1.1.其他UA则选择了SVG 1.2微小的部分，例如矢量效果，但目前没有UA能够全部实现(我认为是Opera 12).
IE has only targeted SVG 1.1 which does not have vector-effects. Other UAs have cherry picked parts of SVG 1.2 tiny such as vector-effects but no current UA implements it all (Opera 12 did I think).
要解决此问题，请使用javascript计算笔画的宽度. IE.算出应用于形状的变换与将其逆变换应用于笔划宽度之间的差异.当我在Firefox中实现此功能时，这并不容易.
To work around it figure out how wide the stroke should be using javascript. I.e. work out the difference between the transform that's applied to the shape and apply the inverse of that to the stroke-width. It's not straightforward as I found when I implemented this in Firefox.
这篇关于SVG，矢量效果＝“非缩放冲程".和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！