SVG/Elemente/linearGradient

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

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

Start-Tag: notwendig End-Tag: notwendig <linearGradient>…</linearGradient>
Elternelemente	Darf vorkommen in: defs
erlaubte Inhalte	einer oder mehrere stops animate, animateMotion, animateTransform, set
Browsersupport	Details: {{{caniuse}}}

Attribute

Name	Inhalt	Standardwert	Bedeutung
Kernattribute
class	ID		ordnet ein Element einer oder mehreren Klassen zu.
id	ID		identifiziert ein einziges Element innerhalb eines Dokuments
lang	ID		identifiziert eine Sprachangabe
style	ID	CDATA	Stilangabe durch Präsentationsattribute
tabindex	ID		macht Element „antabbbar“
xml:base	CDATA		Basis-URL
xml:lang		Sprachkürzel	legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space		default, preserve	Verhalten gegenüber whitespace)
Präsentationsattribute
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
cursor
cx			(SVG2)
cy			(SVG2)
direction
display
dominant-baseline
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
height			(SVG2)
isolation
letter-spacing
lighting-color
mask
opacity
overflow
pointer-events
r			(SVG2)
rx			(SVG2)
ry			(SVG2)
text-anchor
text-decoration
unicode-bidi
visibility
word-spacing
writing-mode
width			(SVG2)
x			(SVG2)
y			(SVG2)
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