如何使 SVG 打破纵横比答案

【问题标题】：How to make SVG break aspect ratio如何使 SVG 打破纵横比
【发布时间】：2014-10-25 06:04:46
【问题描述】：

我有 SVG，我需要完成浏览器窗口。这是一个分配给 src 属性的下垂。我不做任何事情，始终保持纵横比。我什至通过 CSS 强制图像宽度和高度，但我无法让它工作。

网址：https://dl.dropboxusercontent.com/u/814218/svg/svg_test.html

有什么建议吗？

【问题讨论】：

标签： svg

【解决方案1】：

最后，我通过#SVG IRC Mozilla Group 的推荐找到了解决方案。相关信息在这里：http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg

我需要使用 viewBox 和 preserveAspectRatio 属性。这就是解决方案。

这里是最终示例 SVG 源代码：

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1282 802" preserveAspectRatio="defer none" xml:space="preserve"> <polygon opacity="0.2" fill="#FF00FF" stroke="#93278F" stroke-miterlimit="10" points="-1.5,0 -1.5,800 638.5,400 "/> <polygon opacity="0.2" fill="#009245" points="0,801 1280,801 640,401 "/> <polygon opacity="0.2" fill="#FFFF00" stroke="#FFFF00" stroke-miterlimit="10" points="638.5,400 1278.5,800 1278.5,0 "/> </svg>

【讨论】：

preserveAspectRatio="none" 为我工作。感谢您指引正确的方向。
如果你在 svg 标签上设置了 width 和 height 属性，这些也需要被移除。

【解决方案2】：

尝试使用：

.autoHeight{
width: 100%;
height: 100%;
}

#bg img {
max-width: 100%;
width: 100%;
height: 100%;
}

您的 html 应该如下所示：

    <body cz-shortcut-listen="true">
        <div id="bg" class="autoHeight" style="width: 100%; height: 100%;">
            <img class="autoHeight" src="triangles.svg" alt="" style="width: 100%; height: 100%;">
        </div>
</body>

但是，基本上，你需要使用：宽度和高度：100%

【讨论】：

感谢 MrMins，我在上面对 Nikolay 发表评论，我找到并发布了解决方案。是 SVG 代码问题。谢谢！

【解决方案3】：

你的意思是你需要这样的东西吗？

<html>
<head>
  <style>
	html, body, img#svg { width: 100%; height: 100%; border: 0; margin: 0; padding:0 }
  </style>
</head>
<body>
   <img id="svg" src="https://dl.dropboxusercontent.com/u/814218/svg/triangles.svg" />
</body>
</html>

【讨论】：

感谢 Nikolay，但问题出在 SVG 代码中，而不是 HTML、CSS 代码中。我终于解决了。不管怎么说，还是要谢谢你。我在下面发布解决方案。