Html 为什么这个 SVG 图形在 IE9 和 10（预览版）中不能缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7711641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't this SVG graphic scale in IE9 and 10 (preview)?
提问by Jitendra Vyas
According to IE websiteSVG is supported. And according to this answer too What are SVG (Scalable Vector Graphics) supported browsers?
根据IE 网站，支持 SVG。并且根据这个答案什么是 SVG (Scalable Vector Graphics) 支持的浏览器？
http://jsfiddle.net/jitendravyas/2UWNe/show/
http://jsfiddle.net/jitendravyas/2UWNe/show/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="button_surface" gradientUnits="objectBoundingBox"
x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#434343" offset="0"/>
<stop stop-color="#000000" offset="0.67"/>
</linearGradient>
<linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
<stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- button content -->
<rect x="10" y="10" rx="15" ry="15" width="150" height="80"
fill="url(#button_surface)" stroke="#363636"/>
<text x="30" y="55" fill="white"
font-family="Tahoma" font-size="20" font-weight="500">
SVG Button
</text>
<!-- vitual lighting effect -->
<rect x="12" y="12" rx="15" ry="15" width="146" height="76"
fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>
回答by Phrogz
IE seems to be mishandling the missing preserveAspectRatioattribute. You can get it to scale in IE by adding preserveAspectRatio="xMinYMin slice"as seen here:
http://jsfiddle.net/2UWNe/4/show
IE 似乎对缺少的preserveAspectRatio属性处理不当。您可以通过添加preserveAspectRatio="xMinYMin slice"如下所示在 IE 中扩展它：http:
//jsfiddle.net/2UWNe/4/show
However, what IE is showing is not the correct behavior, and thus this change causes other browsers to behave differently than IE. (Microsoft, however, believes that they support preserveAspectRatio.)
但是，IE 显示的不是正确的行为，因此此更改导致其他浏览器的行为与 IE 不同。（但是，Microsoft认为他们支持preserveAspectRatio.）
I haven't looked deeply at your units or content bounding boxes. What effect are you really trying to achieve?
我没有深入研究你的单位或内容边界框。你真正想要达到什么效果？
回答by Oriol
SVGs don't scale the same way as raster images like JPG, PNG, and GIF which have a clearly defined size.
SVG 的缩放方式与 JPG、PNG 和 GIF 等具有明确定义大小的光栅图像不同。
You will need to resort to hacks to guarantee same display across browsers.
您将需要求助于黑客来保证跨浏览器的相同显示。
Try this:
尝试这个：
<svg width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 99.99%; height: 1px; overflow: visible; box-sizing: content-box; enable-background:new 0 0 381.1 381.1;" ... >
回答by Spain Train
The problem is that you are using percentages for height and width, as explained here (http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/).
问题是您使用的是高度和宽度的百分比，如此处所述（http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/） .
If the width and height are either defined as something as useless as 100% or if they aren't defined at all, these browsers will make a guess as to what the dimensions ought to be based on the points and shapes defined in the body of the SVG file.
如果宽度和高度被定义为像 100% 这样无用的东西，或者根本没有定义它们，这些浏览器将根据主体中定义的点和形状来猜测尺寸应该是什么SVG 文件。
Change to width=480and height=360and you should be fine.
改为width=480andheight=360你应该没问题。
回答by orikon
Another option is to use viewport units. This way your SVG will scale according to the size of the window:
另一种选择是使用视口单位。这样，您的 SVG 将根据窗口的大小进行缩放：
<svg width="100%" height="20vw" viewBox="0 0 150 150">
<rect x="10" y="10" width="150" height="130" fill="#00ff00"/>
</svg>
