0

无论我尝试什么，我都无法让这个 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-，它会重新调整 SVG 的大小，但它看起来比其他所有浏览器都要轻；几乎就像是从顶部将 SVG 的整页版本裁剪到 200 像素。

我已经尝试了我能找到的其他两个问题的两个答案，但都没有工作。

4

1 回答 1

0

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

preserveAspectRatio 的W3 文档。

编辑：在玩了更多之后，我发现背景位置在 Safari 中真的很奇怪。xM(in|id|ax)yM(in|id|ax) 部分preserveAspectRatio似乎确定了 SVG 将在页面上的位置，而不是执行 W3 中描述的操作。

看来（至少在我看来） xMidYMax 相当于，background-position: center bottom;xMinyMin 相当于background-position: center top;

于 2013-07-10T18:51:40.923 回答