SVG/Elemente/linearGradient
Aus SELFHTML-Wiki
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
Weblinks
- W3C: LinearGradients
Start-Tag: notwendig End-Tag: notwendig <linearGradient>…</linearGradient> | |
Elternelemente | Darf vorkommen in: |
---|---|
erlaubte Inhalte |
einer oder mehrere stops |
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
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- Filter
- Muster und Verläufe
- linearGradient
- radialGradient
- pattern
- stop