選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY 資料科學
     ❯   

SVG 徑向漸變


SVG 徑向漸變 - <radialGradient>

<radialGradient> 元素用於定義徑向漸變(從一種顏色到另一種顏色、從一個方向到另一個方向的圓形過渡)。

漸變定義放在 <defs><svg> 元素中。<defs> 元素是“定義”的縮寫,包含特殊元素(如漸變)的定義。

每個漸變都必須有一個 id 屬性來標識漸變。然後圖形/影像指向要使用的漸變。


徑向漸變 1

一個帶有從紅色到藍色徑向漸變的橢圓

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
自己動手試一試 »

程式碼解釋

  • <radialGradient> 元素的 id 屬性定義了漸變的唯一名稱
  • cxcy 屬性定義了徑向漸變結束圓的 x 和 y 位置
  • fxfy 屬性定義了徑向漸變起始圓的 x 和 y 位置
  • r 屬性定義了徑向漸變結束圓的半徑
  • 漸變的顏色由兩個或多個 <stop> 元素定義
  • <stop> 中的 offset 屬性定義了漸變停止點的位置
  • <stop> 中的 stop-color 屬性定義了漸變停止點的顏色
  • <ellipse> 元素的 fill 屬性將該元素指向“grad1”漸變


徑向漸變 2

一個帶有從紅色到綠色再到藍色徑向漸變的橢圓

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
自己動手試一試 »

徑向漸變 3

一個帶有從紅色到藍色徑向漸變的橢圓(這裡我們將結束圓的 x 和 y 位置設定為 25%)

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad3" cx="25%" cy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
自己動手試一試 »

徑向漸變 4 - spreadMethod="reflect"

一個帶有從紅色到藍色徑向漸變和 spreadMethod="reflect" 的橢圓

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
自己動手試一試 »

徑向漸變 5 - spreadMethod="repeat"

一個帶有從紅色到藍色徑向漸變和 spreadMethod="repeat" 的橢圓

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
自己動手試一試 »

徑向漸變 6

定義另一個帶有從紅色到藍色徑向漸變的橢圓

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>
自己動手試一試 »

程式碼解釋

  • <stop> 中的 stop-opacity 屬性定義了漸變停止點顏色的不透明度

SVG <radialGradient> 屬性

Attribute 描述
id 必需。定義 <radialGradient> 元素的唯一 id
cx 徑向漸變結束圓的 x 位置。預設為 50%
cy 徑向漸變結束圓的 y 位置。預設為 50%
fr 徑向漸變起始圓的半徑。預設為 0%
fx 徑向漸變起始圓的 x 位置。預設為 50%
fy 徑向漸變起始圓的 y 位置。預設為 50%
r 徑向漸變結束圓的半徑。預設為 50%
spreadMethod 定義漸變的擴散方法。可能的值:“pad”、“reflect”、“repeat”。預設為“pad”
href 定義對另一個 <radialGradient> 元素的引用,該元素將用作模板
gradientUnits 定義 cx、cy、r、fx、fy、fr 的座標系統。可能的值:“userSpaceOnUse”和“objectBoundingBox”。預設為“objectBoundingBox”
gradientTransform 定義對漸變座標系統的額外變換

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援