SVG/Element/linearGradient

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

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 0% X-Position
y1 NUMBER 0% Y-Position
x2 NUMBER 100% X-Position
y2 NUMBER 0% 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

Weblinks