SVG/Element/linearGradient

Das linearGradient-Element beschreibt einen linearen Farbverlauf, der standardmäßig einem Vektor von links nach rechts folgt.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
defs

erlaubte Inhalte

einer oder mehrere stops
animate, animateMotion, animateTransform, set

Attribute

Name	Inhalt	Standardwert	Bedeutung
gradientTransform	CDATA
gradientUnits	userSpaceOnUse, ObjectBoundingBox	userSpaceOnUse	definiert das Koordinatensystem für den Inhalt des Verlaufs-Elements
href	CDATA
spreadMethod	pad, reflect, repeat	pad
x1	NUMBER	0px	X-Position
y1	NUMBER	0px	Y-Position
x2	NUMBER	0px	X-Position
y2	NUMBER	0px	Y-Position

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<defs>
    <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#dfac20" />
      <stop offset="100%" stop-color="#3983ab" />
    </linearGradient>
</defs>
 
<rect id="eins" x="10"  y="10" width="150" height="200" fill="url(#verlauf1)" />

Mit dem stop-Element lässt sich ein Color-Stop festlegen, der die Eigenschaften Farbe, deren Position und deren Transparenz setzt.

Beachten Sie: Die Werte der Attribute x1, y1, x2 und y2 sind keine Pixelwerte, sondern Prozentangaben. Sie beziehen sich auf das zu füllende Element.

Siehe auch

• SVG/Farben/Verläufe

Weblinks

• W3C: LinearGradients