Css 如何使用<；缩放SVG；图像>；标签回退？

我正在研究如何以响应的方式添加外部SVG文件，并爱上了，因为它不需要JavaScript

（SVG已被冲刷“清洗”，因此去除了高度/宽度属性，并根据建议添加了

viewBox

。）

问题在于，这种技术似乎需要

高度

和

宽度

属性才能在

图像

标签上工作，这是没有响应的。建议的语法是：

<svg width="200px" height="100px">
    <image xlink:href="logo.svg" src="logo.png" width="200px" height="100px"/>
</svg> 

现在，除了IE9-11之外，所有主要浏览器中的一切都如预期一样工作，问题在于

标记：它没有围绕

标记

一直在玩弄各种组合，比如省略

的height属性，但都没有用

有没有人在不使用JavaScript或条件语句的情况下解决了这个问题

注意：当然欢迎使用其他方法来实现同样的效果（即，响应、外部SVG文件、工作回退以及不使用JavaScript）

---

注2：在IOS 5上的Safari中，所描述的方法也不会优雅地回退。

我今天也在处理同一问题，遇到了你的问题，希望得到答案

请查看此代码以获取答案：

诀窍是在我的SVG文件中有正确的属性，即

height="..." 
width="..." 
viewBox="..." 
xml:space="preserve"

当我从illustrator保存该文件时，SVG文件中缺少高度和宽度属性

最后，您需要以下CSS才能正常工作：

这是针对webkit中的一个bug的

svg { max-height: 100%; }

当然，这会使图像拉伸

img { width: 100%; }

---

使用

img

标记是另一种方法，它不会在不理解SVG的浏览器中提供回退。它对我来说很好，您需要在onerror属性中指定一个图像，如下所示：我已经做了一些更改，这应该是现在需要的全部-欢迎使用其他方法，但请阅读我对这种方法的标准（没有JS）

svg { max-height: 100%; }

img { width: 100%; }