Question

我正在研究如何以响应方式添加外部SVG文件，而SVG image tag trick则因为它不需要JavaScript。

（SVG已经用冲刷'洗'，因此被剥去高度/宽度属性，并按照建议添加viewBox。）

问题是，这种技术似乎需要height和width属性才能在image标记上工作，而该标记没有响应。建议的语法是：

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

但是，设置相对尺寸，如下：

<svg style="width:100%; height:100%">
    <image xlink:href="logo.svg" src="logo.png" width="100%" height="100%"/>
</svg>

..使SVG响应，但是不正确地呈现<image>元素（或者，无论如何都不是预期的）。这可以通过添加preserveAspectRatio和viewBox属性来修复：

<svg style="width:100%; height:100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 100">
    <image xlink:href="logo.svg" src="logo.png" width="100%" height="100%"/>
</svg>

现在一切都在所有主流浏览器中按预期工作，但在IE9-11中，问题现在出现在<svg>标记中：它没有包裹<image>标记。

一直在玩各种组合，比如省略<svg>的身高属性，但无济于事。

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

注意：实现相同的其他方法当然是受欢迎的（即响应式，外部SVG文件，工作后备，不使用JavaScript）注意2：所描述的方法也不会在IOS 5上的Safari中优雅地回退。

Answer 1

我今天正在处理同样的问题并且遇到了你希望得到答案的问题。

请查看此代码以获取答案：http://jsfiddle.net/ECTBL/

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

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

当我从Illustrator中保存文件时，它在SVG文件中缺少高度和宽度属性。

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

这是针对webkit中的错误

svg { max-height: 100%; }

当然，这会使图像延伸。

img { width: 100%; }

如何使用<img/>标记回退来扩展SVG？

1 个答案: