我正在尝试使用preserveAspectRatio="xMidYMid meet"缩放SVG图像以适合其容器，这是默认设置，但无论如何我还是要指定它以便清楚。使用下面指定的CSS和SVG，缩放效果就像我在Chrome中所需的那样。但是，在IE和Firefox中，问题是多边形以保留的纵横比缩放，而背景却没有。不管容器的纵横比如何，背景仍将填充整个容器。在JSFiddle或下面的代码中，容器的背景应为绿色，图像的背景应为灰色，灰色部分是包围蓝色多边形所有四个角的正方形，因为蓝色多边形的高度相同和宽度作为正方形viewBox。
换句话说，如果容器的高度>宽度，我想在灰色/蓝色SVG图像的上方和下方看到绿色，如果容器的宽度>高度，我想在灰色/蓝色SVG图像的每一侧看到绿色。
有什么想法可以使我在所有支持SVG的浏览器中看起来都一样吗？
http://jsfiddle.net/sJYEa/
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html, body{
height: 100%;
margin: 0;
}
#container {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
width: 80%;
height: 80%;
margin: auto;
border: 5px solid black;
background-color: green;
}
#testSVG{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
background-color: gray;
}
</style>
<title>Scratch Pad</title>
</head>
<body>
<div id="container">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="testSVG"
viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet"
width="5000"
height="5000">
<polygon points="150,0 300,150 150,300 0,150" style="fill:blue;" />
</svg>
<!--
<img id="testSVG" src="test.svg"/>
-->
</div>
</body>
</html>
我将尝试预期人们可能会遇到的一些问题：
问：为什么要使用CSS而不是仅仅更改SVG图纸？
答：我计划不仅要设置背景样式，而且还设置
border-radius的边框样式，也许是阴影，或者是背景纹理的样式，并使用:hover，:focus，:active伪类动态地更改它们的样式。 ，这些都是我知道如何在CSS中执行的操作，但不知道如何在SVG中执行。另外，对于旧的浏览器，我必须具有PNG后备功能，如果我将背景，边框等作为图像本身的一部分，这意味着我将需要多个版本的PNG，具体取决于所应用的伪类。由于这些原因，我宁愿使用CSS边框和背景，而不是添加其他SVG元素。问：为什么使用绝对定位使
#testSVG居中？ xMidYMid不应该为您处理位置问题吗？答：我也是这么想的，但事实并非如此。在没有绝对定位和
margin: auto的情况下，Chrome将图像绘制在容器的左上角，然后在调整容器大小时出现缩放错误。问：通过
<img>标记而不是将SVG内联引用SVG图像时，您是否发现了不同的行为？答：可以。当我通过
<img>标记引用SVG时，除非在width元素中使用了height的100%和<svg>属性，否则IE不会保留图像的长宽比，但是在这种情况下， Chrome仅在容器的高度>宽度时显示绿色背景，而在容器的宽度>高度时不显示绿色背景。 IE都不会显示绿色背景。问：为什么对
svg元素的width和height属性使用如此大的值？答：使用指定的
width和height，浏览器似乎很乐意将图像缩小以填充容器，但拒绝放大图像以填充容器。 （不是meet属性中的preserveAspectRatio是什么？！）没有指定的width和height（即使用默认值100%），Chrome的纵向和横向表现出不同的行为。如先前答案中所述。至少按照我目前使用的方式，它的工作方式完全像我在一个浏览器中想要的...。问：我想我可以使它按您想要的方式工作，但是我需要将图像包装在一个额外的非语义元素中。那样行吗？
A：是的！我正在使用简单而纯粹的语义HTML驱动器，但学步制的优先级始终要低于实用性和功能性。
那么，关于如何使它在其他浏览器中正常运行，您有什么想法吗？
最佳答案
我找不到仅使用CSS的任何一致方法。但是，我确实找到了一种可以在使用SVG的浏览器中使用的解决方案。
我添加了一个<rect/>，它可以填充图形后面的整个宽度和高度。然后，我使用CSS将<rect/>的fill设置为使用与分配给SVG元素的background-color相同的颜色。
My updated JSFiddle
在OS X 10.9（13A603）上的Google Chrome v31.0.1650.57（1650.57），Safari v7.0（9537.71）和Firefox v23.0（2313.7.30）中进行了测试并可以正常工作
关于html - 包含SVG图片的HTML框与图片的宽高比不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20205020/