SVG/Elemente/linearGradient

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

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

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