<stop>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<stop> SVG 元素用於定義漸變中的顏色及其位置。此元素始終是 <linearGradient> 或 <radialGradient> 元素的子元素。

使用語境

分類	漸變元素
允許內容	可包含任意數量、任意順序的下列元素 `<animate>`, `<discard>`, `<script>`, `<set>`, `<style>`

屬性

offset: 此屬性定義漸變停止點在漸變向量上的位置。值型別：<number> | <percentage>；預設值：0；可動畫：是
stop-color: 此屬性定義漸變停止點的顏色。它可以作為 CSS 屬性使用。值型別：<color>；預設值：black；可動畫：是
stop-opacity: 此屬性定義漸變停止點的透明度。它可以作為 CSS 屬性使用。值型別：<opacity-value>；預設值：1；可動畫：是

DOM 介面

此元素實現了 SVGStopElement 介面。

示例

html,
body,
svg {
  height: 100%;
}

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>

規範

規範
Scalable Vector Graphics (SVG) 2 # StopElement

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年6月6日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題