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
<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>
Ergebnis
Beachten Sie, dass das mittlere Drittel jedes Gradienten identisch ist. Die äußeren Drittel zeigen den Unterschied zwischen den drei Verteilmethoden.
Beispiele für spreadMethod mit radialen Verläufen
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