如何使用 <image> 标签后备缩放 SVG？

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%; }