Html 跨浏览器 SVG 保留 AspectRatio
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16438416/
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
Cross browser SVG preserveAspectRatio
提问by Peter Hudec
I'm trying to have a SVGgraphic inside an <img />tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVGin Inkscape. It worked as expected on all browsers except for Internet Explorer 9.
我正在尝试在标签内放置一个SVG图形，该图形<img />将适合（没有裁剪）在具有保留纵横比的标签内。我在 Inkscape 中创建了SVG。它在除Internet Explorer 9之外的所有浏览器上都按预期工作。
To make it work on IE 9I had to add the viewBox="0 0 580 220"and preserveAspectRatio="xMidYMid meet"and remove the width="580"and height="220"SVGproperties.
为了使工作在IE 9，我不得不添加viewBox="0 0 580 220"和preserveAspectRatio="xMidYMid meet"并删除width="580"和height="220"SVG属性。
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
This seemed to work everywhere, just until I tried it on Webkit, where the <img />tag gets stretched vertically although the aspect ratio of the SVGis indeed preserved.
这似乎在任何地方都有效，直到我在Webkit上尝试过，<img />尽管确实保留了SVG的纵横比，但标签被垂直拉伸。
When I put back the width="580"and height="220"properties, it works on Webkitbut on IE 9the aspectr ratio is lost.
当我放回width="580"和height="220"属性时，它可以在Webkit上运行，但在IE 9 上，纵横比丢失了。
Is there a cross browser solution for this behavior?
是否有针对此行为的跨浏览器解决方案？
回答by Peter Hudec
Seems like I found the solution:
好像我找到了解决方案：
You need to keep the widthand heightproperties in the SVG.
您需要在SVG 中保留width和height属性。
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
And to make it work on IE 9you need to specify at least one dimension of the <img />tag.
为了使其在IE 9上工作，您需要至少指定<img />标签的一个维度。
<img src="your.svg" style="width: 100%" />
This seems to be working everywhere.
这似乎在任何地方都有效。
回答by Becario Senior
I solved it by setting the following CSS to the :
我通过将以下 CSS 设置为 来解决它：
width: 100%; max-width: (desiredwidth in px)
宽度：100%；最大宽度：（以像素为单位的所需宽度）
回答by bencergazda
The solution in my case was using Peter Hudec's answer, but because of using width: 100%;on the <img />tag, which broke the layout on every non-IE9 browser, I added a IE9-only CSS hack (width: 100%\9\0;). Hope this addition will help someone. :-)
在我的情况下，解决方案是使用 Peter Hudec 的答案，但由于width: 100%;在<img />标签上使用，这破坏了每个非 IE9 浏览器的布局，我添加了一个仅限 IE9 的 CSS hack ( width: 100%\9\0;)。希望这个补充会对某人有所帮助。:-)
Even using the preserveAspectRatio="xMidYMid meet"was not neccessary.
即使使用preserveAspectRatio="xMidYMid meet"也不是必需的。
(I wanted to add only a comment, and not answer, but no reputations yet to do so :-)
（我只想添加评论，而不是回答，但还没有声誉这样做:-)
回答by brennanyoung
Just an additional suggestion: Using an attribute selector based on the .svg filename suffix might be useful in cases where you need this behavior on all your svg content, and don't have control over the markup.
只是一个额外的建议：使用基于 .svg 文件名后缀的属性选择器在您需要在所有 svg 内容上使用此行为并且无法控制标记的情况下可能很有用。
For example
例如
img[src$=".svg"] {
width:100%;
}
回答by Ivan Town
Just thought that I would add how I stepped into a solution. I had trouble figuring out some of the issues at first.
只是想我会添加我如何进入解决方案。一开始我很难弄清楚一些问题。
- Edit your SVG file to remove the hard-coded height and width attributes. (with simple text editor)
- Apply width:100% css to your svg image to make IE display it like other browsers. (as big as it's container)
- Use css on your image container for consistent results!
- 编辑您的 SVG 文件以删除硬编码的高度和宽度属性。（使用简单的文本编辑器）
- 将 width:100% css 应用到您的 svg 图像，使 IE 像其他浏览器一样显示它。（和容器一样大）
- 在图像容器上使用 css 以获得一致的结果！
I made a page to describe it in more detail at http://ivantown.com/posts/svg-scaling-with-ie/
我在http://ivantown.com/posts/svg-scaling-with-ie/做了一个页面来更详细地描述它
