响应式 svg 在 safari 中没有得到全宽答案

【问题标题】：Responsive svg not getting full width in safari响应式 svg 在 safari 中没有得到全宽
【发布时间】：2014-08-09 18:31:26
【问题描述】：

我有一个 svg，它应该是身体 100% 的宽度，它适用于 ie11、chrome 和 firefox - 但在 safari 中，svg 的两侧都有一些空间，我无法摆脱它。任何帮助表示赞赏 - 请参阅此处的小提琴： http://jsfiddle.net/tbbtester/2apEh/

CSS：

body{margin:0;padding:0;background:orange;}
.top {position: absolute;width: 100%;}
.inner{height:0;position: relative;padding-top:3.2%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:teal;}

标记：

    <div class="top">
        <div class="inner">
            <svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid meet">
                <rect x="0" y="0" height="3.2" width="100"/>
            </svg>
        </div>
    </div>

【问题讨论】：

标签： html css svg safari

【解决方案1】：

提到这个

Previous SO question

好像是这样

preserveAspectRatio="xMidYMid meet"

是问题。

如果你改成

preserveAspectRatio="none"

问题解决了

JSfiddle Demo

【讨论】：

【解决方案2】：

preserveAspectRatio 属性可以有 3 种不同的值 meet slice none。检查DEMO。

所以如果你使用

<svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid none">

而不是

<svg viewBox='0 0 100 3.2' preserveAspectRatio="xMidYMid meet">

你的问题可能会解决。

【讨论】：