Safari和Mobile Safari中的内联SVG中断

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

事实证明,Safari和移动Safari浏览器崩溃了,如果你忽略height和width属性我设置与CSS的尺寸,这在其他浏览器中正常工作.但是我不得不重新添加这些属性以使其表现一致:

<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"并且它们不受此问题的影响.