css - 宽度为 100% 的 svg 图像并不总是 100% 宽

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

代码是:

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

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

最佳答案

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

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

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

如果有帮助，请告诉我。

关于css - 宽度为 100% 的 svg 图像并不总是 100% 宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21022791/