<radialGradient>

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 <radialGradient> SVG-Element ermöglicht es Autoren, radiale Verläufe zu definieren, die auf Füllungen oder Umrandungen von grafischen Elementen angewendet werden können.

Hinweis: Verwechseln Sie dies nicht mit CSS radial-gradient(). Da CSS-Verläufe nur auf HTML-Elemente angewendet werden können, während SVG-Verläufe nur auf SVG-Elemente anwendbar sind.

Beispiel

html
<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

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

Attribute

cx

Dieses Attribut definiert die x-Koordinate des Endkreises des radialen Verlaufs. Wertetyp: <length> ; Standardwert: 50%; Animierbar: ja

cy

Dieses Attribut definiert die y-Koordinate des Endkreises des radialen Verlaufs. Wertetyp: <length> ; Standardwert: 50%; Animierbar: ja

fr

Dieses Attribut definiert den Radius des Startkreises des radialen Verlaufs. Der Verlauf wird so gezeichnet, dass der 0% <stop> auf den Umfang des Startkreises abgebildet wird. Wertetyp: <length> ; Standardwert: 0%; Animierbar: ja

fx

Dieses Attribut definiert die x-Koordinate des Startkreises des radialen Verlaufs. Wertetyp: <length> ; Standardwert: Gleich wie cx; Animierbar: ja

fy

Dieses Attribut definiert die y-Koordinate des Startkreises des radialen Verlaufs. Wertetyp: <length> ; Standardwert: Gleich wie cy; Animierbar: ja

gradientUnits

Dieses Attribut definiert das Koordinatensystem für die Attribute cx, cy, r, fx, fy, fr. Wertetyp: userSpaceOnUse|objectBoundingBox ; Standardwert: objectBoundingBox; Animierbar: ja

gradientTransform

Dieses Attribut bietet zusätzliche Transformation für das Koordinatensystem des Verlaufs. Wertetyp: <transform-list> ; Standardwert: Identitätstransformation; Animierbar: ja

href

Dieses Attribut definiert einen Verweis auf ein anderes <radialGradient>-Element, das als Vorlage verwendet wird. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: ja

r

Dieses Attribut definiert den Radius des Endkreises des radialen Verlaufs. Der Verlauf wird so gezeichnet, dass der 100% <stop> auf den Umfang des Endkreises abgebildet wird. Wertetyp: <length> ; Standardwert: 50%; Animierbar: ja

spreadMethod

Dieses Attribut gibt an, wie der Verlauf sich verhält, wenn er innerhalb der Grenzen der ihn enthaltenden Form beginnt oder endet. Wertetyp: pad|reflect|repeat ; Standardwert: pad; Animierbar: ja

xlink:href Veraltet

Eine <IRI>-Referenz zu einem anderen <radialGradient>-Element, das als Vorlage verwendet wird. Wertetyp: <IRI> ; Standardwert: keiner; 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
# RadialGradientElement

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
radialGradient
cx
cy
fr
fx
fy
gradientTransform
gradientUnits
href
r
spreadMethod
xlink:href
Deprecated

Legend

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

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