Question

我最近推出了一个使用了一些内联SVG的网站。

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

Chrome和Firefox中的一切都很完美，但是当我在iPhone或桌面Safari上进行测试时，布局完全被破坏，许多SVG都丢失了。我通过W3C验证器运行了源代码，一切都找到了。我经常使用SVG，所以这很令人困惑......

Answer 1

事实证明，如果省略我使用CSS设置维度的height和width属性，Safari和Mobile Safari就会出现问题，这在其他浏览器中运行良好。但我必须重新添加这些属性才能使其表现一致：

<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="55.221px" height="58.079px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
     <path d="[...]"/>
</svg>

请注意上面缺少的width和height属性。

另外，有趣的是指出preserveAspectRatio的价值很重要。我有几个其他内联SVG元素preserveAspectRatio="none meet"，并且它们不受此问题的影响。

Safari和Mobile Safari中的内联SVG中断

1 个答案: