SVG 放射性渐变

SVG 渐变必须在 <defs> 标签中进行定义。


放射性渐变

<radialGradient> 用来定义放射性渐变。

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。

请把下面的代码拷贝到记事本,然后把文件保存为 "radial1.svg"。把此文件放入您的 web 目录:

  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg width="100%" height="100%" version="1.1"
  5. xmlns="http://www.w3.org/2000/svg">
  6. <defs>
  7. <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
  8. fx="50%" fy="50%">
  9. <stop offset="0%" style="stop-color:rgb(200,200,200);
  10. stop-opacity:0"/>
  11. <stop offset="100%" style="stop-color:rgb(0,0,255);
  12. stop-opacity:1"/>
  13. </radialGradient>
  14. </defs>
  15. <ellipse cx="230" cy="200" rx="110" ry="100"
  16. style="fill:url(#grey_blue)"/>
  17. </svg>
代码解释:

<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称,fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变,cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

查看效果


另一个例子:
  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg width="100%" height="100%" version="1.1"
  5. xmlns="http://www.w3.org/2000/svg">
  6. <defs>
  7. <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
  8. fx="50%" fy="50%">
  9. <stop offset="0%" style="stop-color:rgb(200,200,200);
  10. stop-opacity:0"/>
  11. <stop offset="100%" style="stop-color:rgb(0,0,255);
  12. stop-opacity:1"/>
  13. </radialGradient>
  14. </defs>
  15. <ellipse cx="230" cy="200" rx="110" ry="100"
  16. style="fill:url(#grey_blue)"/>
  17. </svg>

查看效果