spreadMethod

spreadMethod 屬性確定在梯度定義的邊緣之外如何填充形狀。

您可以將此屬性與以下 SVG 元素一起使用

上下文說明

值	`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 與徑向漸變的示例

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>

結果

規範

規範
可縮放向量圖形 (SVG) 2 # LinearGradientElementSpreadMethodAttribute
可縮放向量圖形 (SVG) 2 # RadialGradientElementSpreadMethodAttribute

瀏覽器相容性

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