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

Question

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

这是codepen: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代码中的属性不会损害显示的结果.然而,重复计算是没有意义的,并且考虑到梯度的位图是相对昂贵的,所以更好地降低它.

请参阅此处获取演示: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).