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）。

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

1 个答案: