Question

无论我尝试什么，我都无法让这个SVG渐变在Windows上的最新Safari（5.1.7）中正常工作：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200">  
    <linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200">  
        <stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/>  
    </linearGradient>  
    <rect x="0" y="0" width="1920" height="200" fill="url(#g186)" />  
</svg>`

的jsfiddle：
http://jsfiddle.net/wumnb/1/（请注意，由于base64编码的SVG，浏览器可能会抛出XSS警告）

当我将-webkit-background-size: 100% 200px;包含在-webkit-中和/或不包含{{1}}时，它会重新调整SVG的大小，但它看起来比其他所有浏览器都要轻得多;几乎就像它从顶部将SVG的整页版本从顶部剪裁到200px。

我已经尝试过我能找到的other两个questions的答案，但两个都没有效果。

Answer 1

事实证明preserveAspectRatio="none"需要preserveAspectRatio="xMidYMax meet"且视图框设置为所需尺寸。可悲的是，这不允许百分比，但它总比没有好。

W3 documentation表示preserveAspectRatio。

编辑：在玩这个游戏后，我发现Safari中的背景位置非常奇怪。 preserveAspectRatio的xM（in | id | ax）yM（in | id | ax）部分似乎决定了SVG在页面上的位置，而不是W3上描述的内容。

（至少对我而言）xMidYMax相当于background-position: center bottom;而xMinyMin相当于background-position: center top;

Windows上的Safari - 使用SVG渐变的CSS背景大小和位置

1 个答案: