具有 100% 宽度的 svg 图像并不总是 100% 宽

【问题标题】：svg image with 100% width isn't constantly 100% wide具有 100% 宽度的 svg 图像并不总是 100% 宽
【发布时间】：2014-01-28 03:44:02
【问题描述】：

我想要一个 (svg-) 响应式地填充 100% 宽度（高度：auto）的图像。当我逐渐减小浏览器窗口的大小时，图像大小似乎“滞后”——在某些点跳变小一点，然后回到 100%，依此类推。

代码是：

<body>
<img class="zigzag" width="100%" height="auto" src="images/wavegreynoborderstraight.svg">
</body

在正文上没有设置边距/填充，没有任何相似之处。这是一个常见的问题吗？
我正在用 chrome (31.0) 进行测试。

【问题讨论】：

【解决方案1】：

我猜你没有正确关闭 body-tag。也许，如果您在文档中也犯了这个错误，那可能是坏人。否则，我们需要知道嵌入的 svg 代码——它可能是无效的......

我用我自己的 svg 文件在 firefox(26.0) 和 chrome(31.0) 中尝试了你的代码，它在两者中都运行良好，即使是未封闭的正文...

也可能是你的 svg 太复杂了。（太多小数位或锚点）尝试简化 SVG 编辑器中的路径并将其导出为小数点后 3 位。

如果有帮助，请告诉我。

【讨论】：