野生动物园中的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) 上测试。