在Safari中，响应式SVG无法获得全宽。

Question

我有一个svg应该是body的100%宽度，它在ie11、chrome和firefox中可以工作，但在safari中，在svg的两侧有一些空间，我无法摆脱它。任何帮助都将不胜感激-请查看这里的fiddle： 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>

- user3755716

Answer 1

参考此前一个SO问题，似乎这样做

preserveAspectRatio="xMidYMid meet"

是问题。 如果你将其更改为

preserveAspectRatio="none"

问题已解决

JSfiddle演示

- Paulie_D

Answer 2

preserveAspectRatio 属性可以有三种不同的值：meet、slice 和 none。请查看DEMO。

因此，如果您使用

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

替代

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

你的问题可能会得到解决。

- Kheema Pandey

Answer 3

在SVG元素上添加宽度和高度为100％的固定值，可以解决Safari浏览器中的问题。

- parker_codes