spreadMethod

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das spreadMethod-Attribut bestimmt, wie eine Form über die definierten Kanten eines Gradienten hinaus gefüllt wird.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Kontextnotizen

Wert	`pad` \| `reflect` \| `repeat`
Anfangswert	`pad`
Animierbar	Ja

pad: Dieser Wert gibt an, dass die Endfarbe des Gradienten die Form über dessen Kanten hinaus füllt.
reflect: Dieser Wert gibt an, dass der Gradient in umgekehrter Reihenfolge über seine Kanten hinaus wiederholt wird.
repeat: Dieser Wert gibt an, dass der Gradient in der ursprünglichen Reihenfolge über seine Kanten hinaus wiederholt wird.

Definition der Kanten eines Gradienten

Standardmäßig reicht ein Gradient bis zu den Rändern der gefüllten Form. Um die Effekte dieses Attributs zu sehen, müssen Sie die Größe des Gradienten kleiner als die Form festlegen.

Im Fall eines linearen Gradienten können die Kanten als Rechteck durch die Attribute x1, x2, y1 und y2 definiert werden. Im Fall eines radialen Gradienten können die Kanten als äußere und innere Kreise durch die Attribute cx, cy und r (äußere) und fx, fy und fr (innere) definiert werden.

Beispiele für spreadMethod mit linearen Verläufen

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>

<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>

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # LinearGradientElementSpreadMethodAttribute
Scalable Vector Graphics (SVG) 2 # RadialGradientElementSpreadMethodAttribute

Browser-Kompatibilität

BCD tables only load in the browser