内嵌SVG在Safari和Mobile Safari中断开 [英] Inline SVG breaks in Safari and Mobile Safari

问题描述

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

I recently launched a site which used a bit of inline 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上测试时，布局被完全打破，许多SVGs丢失。我通过W3C验证器运行源，一切都找到。我使用SVG很多，所以这很混乱...

Everything was perfect in Chrome and Firefox, but when I tested on an iPhone or in desktop Safari, the layout was completely broken and many of the SVGs were missing. I ran the source through the W3C validator and everything was find. I work with SVG a lot, so this was very confusing...

推荐答案

事实证明，Safari和移动Safari如果省略 height 和 width 属性，我用CSS设置尺寸，在其他浏览器中工作正常。但是我必须重新添加这些属性，以使它的行为一致：

It turns out that Safari and Mobile Safari freak out if you omit the height and width attributes I was setting the dimensions with CSS, which worked fine in other browsers. But I had to add those attributes back in to make it behave consistently:

<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 和<$ c $

Notice the width and height attributes that were missing above.

此外，有趣的是指出 preserveAspectRatio / code>事项。我有一些其他内联SVG元素， preserveAspectRatio =none meet，他们不受此问题影响。

Also, it's interesting to point out that the value of preserveAspectRatio matters. I had a couple other inline SVG elements that had preserveAspectRatio="none meet" and they were unaffected by this issue.

这篇关于内嵌SVG在Safari和Mobile Safari中断开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！