<stop>
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.
Das <stop> SVG-Element definiert eine Farbe und deren Position zur Verwendung in einem Farbverlauf. Dieses Element ist immer ein Kind eines <linearGradient> oder <radialGradient> Elements.
Nutzungskontext
Attribute
offset-
Dieses Attribut definiert, wo der Farbverlauf-Stopp entlang des Farbverlaufs vektors platziert wird. Wertetyp: <number> | <percentage>; Standardwert:
0; Animierbar: ja stop-color-
Dieses Attribut definiert die Farbe des Farbverlauf-Stopps. Es kann als CSS-Eigenschaft verwendet werden. Wertetyp: <color>; Standardwert:
black; Animierbar: ja stop-opacity-
Dieses Attribut definiert die Deckkraft des Farbverlauf-Stopps. Es kann als CSS-Eigenschaft verwendet werden. Wertetyp: <opacity-value>; Standardwert:
1; Animierbar: ja
DOM-Schnittstelle
Dieses Element implementiert die SVGStopElement-Schnittstelle.
Beispiel
<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> Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StopElement |