如何扩大与SVG 标签回退？(How to scale an SVG with

我研究如何以快速响应的方式添加外部SVG文件，并且下跌的SVG图像标记把戏 ，因为它不需要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：所描述的方法不正常的Safari后备上的IOS 5任。

Answer 1:

我今天就同一问题的工作，并在您的问题跑了希望的答案。

看看这个代码的答案： http://jsfiddle.net/ECTBL/

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

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

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

最后，你需要以下CSS为它工作：

这是在WebKit的一个bug

svg { max-height: 100%; }

当然，这使得图像拉伸。

img { width: 100%; }

文章来源: How to scale an SVG with tag fallback?