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>