我有一个 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>
最佳答案
关于这个
好像是这样
preserveAspectRatio="xMidYMid meet"
是问题。
如果你把它改成
preserveAspectRatio="none"
问题解决了
关于html - 响应式 svg 在 safari 中没有全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24302878/