<linearGradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das <linearGradient>-Element von SVG ermöglicht es Autoren, lineare Gradienten zu definieren, die auf andere SVG-Elemente angewendet werden.

Beispiel

html
<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

Attribute

gradientUnits

Dieses Attribut definiert das Koordinatensystem für die Attribute x1, x2, y1, y2. Werttyp: userSpaceOnUse|objectBoundingBox ; Standardwert: objectBoundingBox; Animierbar: ja

gradientTransform

Dieses Attribut bietet eine zusätzliche Transformation für das Koordinatensystem des Gradienten. Werttyp: <transform-list> ; Standardwert: identische Transformation; Animierbar: ja

href

Dieses Attribut definiert eine Referenz zu einem anderen <linearGradient>-Element, das als Vorlage verwendet wird. Werttyp: <URL> ; Standardwert: keiner; Animierbar: ja

spreadMethod

Dieses Attribut gibt an, wie sich der Gradient verhält, wenn er innerhalb der Grenzen der Form, die den Gradient enthält, beginnt oder endet. Werttyp: pad|reflect|repeat ; Standardwert: pad; Animierbar: ja

x1

Dieses Attribut definiert die x-Koordinate des Startpunkts des Vektorgradienten, entlang welchem der lineare Gradient gezeichnet wird. Werttyp: <length>; Standardwert: 0%; Animierbar: ja

x2

Dieses Attribut definiert die x-Koordinate des Endpunkts des Vektorgradienten, entlang welchem der lineare Gradient gezeichnet wird. Werttyp: <length>; Standardwert: 100%; Animierbar: ja

xlink:href Veraltet

Eine <IRI>-Referenz zu einem anderen <linearGradient>-Element, das als Vorlage verwendet wird. Werttyp: <IRI> ; Standardwert: keiner; Animierbar: ja

y1

Dieses Attribut definiert die y-Koordinate des Startpunkts des Vektorgradienten, entlang welchem der lineare Gradient gezeichnet wird. Werttyp: <length>; Standardwert: 0%; Animierbar: ja

y2

Dieses Attribut definiert die y-Koordinate des Endpunkts des Vektorgradienten, entlang welchem der lineare Gradient gezeichnet wird. Werttyp: <length>; Standardwert: 0%; Animierbar: ja

Nutzungskontext

KategorienGradient-Element
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Beschreibende Elemente
<animate>, <animateTransform>, <script>, <set>, <stop>, <style>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# LinearGradientElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
linearGradient
gradientTransform
gradientUnits
href
spreadMethod
x1
x2
xlink:href
Deprecated
y1
y2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.