css - 如何使用 <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%; }

当然，这会使图像拉伸(stretch)。

img { width: 100%; }