Question

我有和SVG，我需要完成浏览器窗口。这是一个分配给src属性的sag。我没有做，总是保持纵横比。我甚至通过CSS强制图像宽度和高度，但我无法使其工作。

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

有什么建议吗？

Answer 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>

Answer 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％

Answer 3

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

＆＃13;

<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>

＆＃13;

如何使SVG中断纵横比

3 个答案: