svg transparent radial gradient in safari not working

Question

I have a SVG radial gradient that works in Chrome, Firefox and even Internet Explorer but does not work in Safari. Any idea how to get this to work in Safari?

Here is the 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

In your gradient's definition, alter the opacity for the stop points. So,instead of shifting the color from a given value to transparency, you would alter the transparency itself. The result seems to mimick the firefox behavior accurately.

Leaving the stop-color attributes in the code does not harm the displayed result. However, the duplicate computation is pointless, and given that bitmapping a gradient is relatively costly iirc, better drop it.

See here for a demo: 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>

These modifications shouldn't affect the rendering on other platforms.

Tested on Safari 5.1.7 (7534.57.2) on Windows.