<linearGradient>

<linearGradient> 元素允許作者定義線性漸變以應用於其他 SVG 元素。

示例

html
<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

屬性

gradientUnits

此屬性定義了屬性 x1、x2、y1、y2 的座標系 值型別：userSpaceOnUse|objectBoundingBox；預設值：objectBoundingBox；可動畫：是

gradientTransform

此屬性為漸變座標系提供了額外的變換。 值型別：<transform-list>；預設值：恆等變換；可動畫：是

href

此屬性定義了對另一個 <linearGradient> 元素的引用，該元素將用作模板。 值型別：<URL>；預設值：無；可動畫：是

spreadMethod

此屬性指示如果漸變在包含漸變的形狀的邊界內開始或結束，則漸變的行為。 值型別：pad|reflect|repeat；預設值：pad；可動畫：是

x1

此屬性定義了線性漸變繪製的向量漸變起點沿 X 軸的座標。 值型別：<length-percentage> | <number>；預設值：0%；可動畫：是

x2

此屬性定義了線性漸變繪製的向量漸變終點沿 X 軸的座標。 值型別：<length-percentage> | <number>；預設值：100%；可動畫：是

xlink:href

對將用作模板的另一個 <linearGradient> 元素的 <IRI> 引用。 值型別：<IRI>；預設值：無；可動畫：是

y1

此屬性定義了線性漸變繪製的向量漸變起點沿 Y 軸的座標。 值型別：<length-percentage> | <number>；預設值：0%；可動畫：是

y2

此屬性定義了線性漸變繪製的向量漸變終點沿 Y 軸的座標。 值型別：<length-percentage> | <number>；預設值：0%；可動畫：是

使用上下文

類別漸變元素
允許的內容任意數量的以下元素，按任意順序
描述性元素
<animate>、<animateTransform>、<set>、<stop>

規範

規範
可縮放向量圖形 (SVG) 2
# 線性漸變

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。