spreadMethod - SVG | MDN

用法說明

值	`pad` \| `reflect` \| `repeat`
初始值	`pad`
可動畫的	是

pad: 此值表示漸變的最終顏色會填充到漸變邊緣之外的形狀區域。
reflect: 此值表示漸變在超出其邊緣後會反向重複。
repeat: 此值指定漸變在超出其邊緣後會按照原始順序重複。

定義漸變的邊緣

預設情況下，漸變會延伸到被填充形狀的邊緣。要看到此屬性的效果，您需要將漸變的大小設定為小於形狀。

對於線性漸變，可以透過 x1、x2、y1 和 y2 屬性將邊緣定義為矩形。對於徑向漸變，可以透過 cx、cy 和 r（外圓）以及 fx、fy 和 fr（內圓）屬性將邊緣定義為外圓和內圓。

線性漸變的 spreadMethod 示例

SVG

html

<svg width="220" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="PadGradient" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient
      id="ReflectGradient"
      spreadMethod="reflect"
      x1="33%"
      x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
    <linearGradient id="RepeatGradient" spreadMethod="repeat" x1="33%" x2="67%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>

  <rect fill="url(#PadGradient)" x="10" y="0" width="200" height="40" />
  <rect fill="url(#ReflectGradient)" x="10" y="50" width="200" height="40" />
  <rect fill="url(#RepeatGradient)" x="10" y="100" width="200" height="40" />
</svg>

結果

請注意，每個漸變的中三分之一是相同的。外三分之一顯示了三種 spreadMethod 之間的區別。

徑向漸變的 spreadMethod 示例

SVG

html

<svg width="340" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
      id="RadialPadGradient"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
      id="RadialReflectGradient"
      spreadMethod="reflect"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient
      id="RadialRepeatGradient"
      spreadMethod="repeat"
      cx="75%"
      cy="25%"
      r="33%"
      fx="64%"
      fy="18%"
      fr="17%">
      <stop offset="0%" stop-color="fuchsia" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
  </defs>

  <rect fill="url(#RadialPadGradient)" x="10" y="10" width="100" height="100" />
  <rect
    fill="url(#RadialReflectGradient)"
    x="120"
    y="10"
    width="100"
    height="100" />
  <rect
    fill="url(#RadialRepeatGradient)"
    x="230"
    y="10"
    width="100"
    height="100" />
</svg>

結果

規範

規範
Scalable Vector Graphics (SVG) 2 # LinearGradientElementSpreadMethodAttribute
Scalable Vector Graphics (SVG) 2 # RadialGradientElementSpreadMethodAttribute

瀏覽器相容性

svg.elements.linearGradient.spreadMethod

svg.elements.radialGradient.spreadMethod

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年3月18日⁩，作者是 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤

擴充套件方法

幫助改進 MDN