svg放射性渐变——气球

svg放射性渐变

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="fs" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
//cx、cy 和 r 属性定义外圈
// fx 和 fy 定义内圈 
//渐变的颜色范围可由两种或多种颜色组成。
<stop offset="0%" style="stop-color:rgb(255,0,0);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(225,0,0);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="70" ry="100"
style="fill:url(#fs)"/>

<defs>
<radialGradient id="ff" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(225,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="400" cy="200" rx="70" ry="100"
style="fill:url(#ff)"/>


</svg>