Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
spreadMethod
Das AttributspreadMethod bestimmt, wie eine Form über die definierten Ränder eines Gradienten hinaus gefüllt wird.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Nutzungshinweise
| Wert | pad |reflect |repeat |
|---|---|
| Anfangswert | pad |
| Animierbar | Ja |
padDieser Wert gibt an, dass die endgültige Farbe des Gradienten die Form über die Ränder des Gradienten hinaus füllt.
reflectDieser Wert gibt an, dass der Gradient sich in umgekehrter Richtung über seine Ränder hinaus wiederholt.
repeatDieser Wert gibt an, dass der Gradient in der ursprünglichen Reihenfolge über seine Ränder hinaus wiederholt wird.
Definition der Ränder eines Gradienten
Standardmäßig erreicht ein Gradient die Ränder der zu füllenden Form. Um die Effekte dieses Attributs zu sehen, müssen Sie die Größe des Gradienten kleiner als die Form festlegen.
Im Falle eines linearen Gradienten können die Ränder als Rechteck durch die Attributex1,x2,y1 undy2 definiert werden. Im Falle eines radialen Gradienten können die Ränder als äußere und innere Kreise durch die Attributecx,cy undr (äußere) undfx,fy undfr (innere) definiert werden.
Beispiele für spreadMethod mit linearen Gradienten
SVG
<svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia" /> <stop offset="100%" stop-color="orange" /> </linearGradient> <linearGradient spreadMethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia" /> <stop offset="100%" stop-color="orange" /> </linearGradient> <linearGradient 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 gleich ist. Die äußeren Drittel zeigen den Unterschied zwischen den drei Spread-Methoden.
Beispiele für spreadMethod mit radialen Gradienten
SVG
<svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient 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 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 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 |