SVG 徑向漸變

SVG 徑向漸變 - <radialGradient>

<radialGradient> 元素用于定義徑向漸變（放射漸變）。

<radialGradient> 元素必須嵌套在 <defs> 標記內。<defs> 元素是定義（definitions）的縮寫，包含對特殊元素（比如濾鏡）的定義。

例子 1

定義一個橢圓，它有從白色到藍色的徑向漸變：

這是 SVG 代碼：

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

親自試一試

代碼解釋：

  • <radialGradient> 標簽的 id 屬性定義了漸變的唯一名稱
  • cx、cy 和 r 屬性定義最外層圓，fx 和 fy 定義最內層圓
  • 漸變的顏色范圍可以由兩種或多種顏色組成。每種顏色都用 <stop> 標記指定
  • offset 屬性用于定義漸變顏色的開始和結束位置
  • fill 屬性將橢圓元素鏈接到漸變

例子 2

定義另一個橢圓，它有從白色到藍色的徑向漸變：

這是 SVG 代碼：

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

親自試一試