Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<radialGradient>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* 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 die Füllung oder den Strich grafischer Elemente angewendet werden können.
Hinweis:Verwechseln Sie es nicht mit dem CSSradial-gradient(), da CSS-Verläufe nur auf HTML-Elemente angewendet werden können, während SVG-Verläufe nur auf SVG-Elemente angewendet werden können.
Verwendungskontext
| Kategorien | Gradient-Element |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente <animate>,<animateTransform>,<script>,<set>,<stop>,<style> |
Attribute
cxDieses Attribut definiert die x-Koordinate des Endkreises des radialen Verlaufs.Werttyp:<length>;Standardwert:
50%;Animierbar:jacyDieses Attribut definiert die y-Koordinate des Endkreises des radialen Verlaufs.Werttyp:<length>;Standardwert:
50%;Animierbar:jafrDieses 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.Werttyp:<length>;Standardwert:0%;Animierbar:jafxDieses Attribut definiert die x-Koordinate des Startkreises des radialen Verlaufs.Werttyp:<length>;Standardwert: Gleich wie
cx;Animierbar:jafyDieses Attribut definiert die y-Koordinate des Startkreises des radialen Verlaufs.Werttyp:<length>;Standardwert: Gleich wie
cy;Animierbar:jagradientUnitsDieses Attribut definiert das Koordinatensystem für die Attribute
cx,cy,r,fx,fy,fr.Werttyp:userSpaceOnUse|objectBoundingBox;Standardwert:objectBoundingBox;Animierbar:jagradientTransformDieses Attribut bietet eine zusätzlicheTransformation für das Gradient-Koordinatensystem.Werttyp:<transform-list>;Standardwert:Identitätstransformation;Animierbar:ja
hrefDieses Attribut definiert einen Verweis auf ein anderes
<radialGradient>-Element, das als Vorlage verwendet wird.Werttyp:<URL>;Standardwert: keiner;Animierbar:jarDieses 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.Werttyp:<length>;Standardwert:50%;Animierbar:jaspreadMethodDieses Attribut gibt an, wie der Verlauf sich verhält, wenn er innerhalb der Grenzen der Form, die den Verlauf enthält, beginnt oder endet.Werttyp:
pad|reflect|repeat;Standardwert:pad;Animierbar:jaxlink:hrefVeraltetEin<IRI>-Verweis auf ein anderes
<radialGradient>-Element, das als Vorlage verwendet wird.Werttyp:<IRI>;Standardwert: keiner;Animierbar:ja
DOM-Schnittstelle
Dieses Element implementiert dieSVGRadialGradientElement-Schnittstelle.
Beispiel
html,body,svg { height: 100%;}<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialGradient> <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>Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElement |