Safari 中的 svg 透明径向渐变不起作用

Question

我有一个 SVG 径向渐变，可以在 Chrome、Firefox 甚至 Internet Explorer 中使用，但在 Safari 中不起作用。知道如何让它在 Safari 中工作吗？

这是代码笔：http://codepen.io/fractorr/pen/OVaYvV

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient r="50%" cy="50%" cx="50%" id="myRadialGradient2">
            <stop stop-color="transparent" offset="0"></stop>
            <stop stop-color="#000000" offset="1"></stop>
        </radialGradient>
    </defs>

    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:blue;"/>
    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient2); stroke: #005000; stroke-width: 3;"/>

</svg>

Answer 1

在你的渐变定义中，改变停止点的不透明度。因此，不是将颜色从给定值转变为透明度，而是改变透明度本身。结果似乎准确地模仿了 firefox 的行为。

在代码中保留 stop-color 属性不会损害显示的结果。然而，重复计算是没有意义的，并且考虑到位图渐变的成本相对较高 iirc，最好放弃它。

演示请看这里：http://codepen.io/anon/pen/aOQreP

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient r="50%" cy="50%" cx="50%" id="myRadialGradient2">
            <stop stop-opacity="0" offset="0"></stop>
            <stop stop-opacity="1" offset="1"></stop>
        </radialGradient>
    </defs>

    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:blue;"/>
    <rect x="10" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient2); stroke: #005000; stroke-width: 3;"/>

</svg>

这些修改应该不会影响其他平台上的渲染。

已在 Windows 上的 Safari 5.1.7 (7534.57.2) 上测试。

Safari 中的 svg 透明径向渐变不起作用

svg transparent radial gradient in safari not working

safari

svg

transparent

radial-gradients