HTML5的SVG绘图笔记5：渐变与透明度

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
线性渐变
linearGradient可用来定义 SVG 的线性渐变。
linearGradient 标签必须嵌套在 defs的内部。defs标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id=" " x1="0%" y1="0%" x2="0%" y2="100%">
</defs>

<svg width="400" height="400">
 <defs>
  <linearGradient id="linear1" x1="0.2" y1="0.3" x2="0.6" y2="0.7">
   <stop offset="0%" stop-color="black"></stop>
   <stop offset="50%" stop-color="green"></stop>
   <stop offset="100%" stop-color="red"></stop>
  </linearGradient>
  <linearGradient id="p1" xlink:href="#linear1" spreadMethod="pad"></linearGradient>
  <linearGradient id="r1" xlink:href="#linear1" spreadMethod="repeat"></linearGradient>
  <linearGradient id="r2" xlink:href="#linear1" spreadMethod="reflect"></linearGradient>
 </defs>
 <rect x="10" y="20" height="100" width="100" fill="url(#p1)"></rect>
 <rect x="10" y="140" height="100" width="100" fill="url(#r1)"></rect>
 <rect x="10" y="300" height="100" width="100" fill="url(#r2)"></rect>
</svg>

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

径向渐变的每个渐变点表示一个圆形路径，从中心点向外扩散。定义径向渐变的语法格式如下：

<radialGradient id="id1" cx="" cy="" r="" fx="" fy="">

<svg width="400" height="400">
 <defs>
  <radialGradient id="radia1" cx="0" cy="0" r="0.7">
   <stop offset="0%" stop-color="black"></stop>
   <stop offset="50%" stop-color="green"></stop>
   <stop offset="100%" stop-color="red"></stop>
  </radialGradient>
  <radialGradient id="p1" xlink:href="#radia1" spreadMethod="pad"></radialGradient>
  <radialGradient id="r1" xlink:href="#radia1" spreadMethod="repeat"></radialGradient>
  <radialGradient id="r2" xlink:href="#radia1" spreadMethod="reflect"></radialGradient>
 </defs>
 <rect x="10" y="20" height="100" width="100" fill="url(#p1)" stroke="black" stroke-width="2"></rect>
 <rect x="150" y="30" height="100" width="100" fill="url(#r1)" stroke="black" stroke-width="2"></rect>
 <rect x="260" y="40" height="100" width="100" fill="url(#r2)" stroke="black" stroke-width="2"></rect>
</svg>

透明度

SVG使用opacity属性定义整个元素的透明度，使用fill-opacity属性为填充（fill属性）设置透明度，使用stroke-opacity属性为边框（stroke属性）设置透明度，这些透明度取值范围都是0到1之间。

<svg width="300px" height="300px">
    <path d="M100 100 A 30,50 0 0,0 200,150 z"
          fill="yellow" stroke="red" stroke-width="5" stroke-opacity="0.2"/>
    <path d="M100 100 A 30,50 0 0,1 200,150 z"
          fill="green" stroke="cyan" stroke-width="5" fill-opacity="0.4"/>
    <path d="M100 100 A 300,30 0 0,0 200,150"
          fill="red" stroke="red" stroke-width="5" opacity="0.6"/>
    <path d="M100 100 A 300,30 0 0,1 200,150" id="red"
          fill="black" stroke="yellow" stroke-width="5" opacity="0.8"/>
</svg>