Safari 和 Mobile Safari 中的内联 SVG 中断

我最近推出了一个使用了一些内联 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，所以这很令人困惑......

事实证明，如果你省略了 Safari 和 Mobile Safari 就会崩溃height and 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 and height上面缺少的属性。

另外，有趣的是指出preserveAspectRatio很重要。我还有其他几个内联 SVG 元素preserveAspectRatio="none meet"他们没有受到这个问题的影响。