<stop>

Aller à :
  1. Contexte d'utilisation
  2. Attributs
  3. DOM Interface
  4. Exemple
  5. Spécifications
  6. Compatibilité des navigateurs
  7. Voir aussi

Cette traduction est en cours.

L'élément SVG <stop> définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément <linearGradient> ou <radialGradient>.

Contexte d'utilisation

CatégoriesÉlément de dégradé
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre:
<animate>, <animateColor>, <set>

Attributs

Attributs globaux

Specific attributes

DOM Interface

Cet élément implémenté l'interface SVGStopElement.

Exemple

SVG

<svg width="160" height="95" viewBox="0 0 80 40"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <!-- Contour de la zone de dessin en noir -->
  <rect fill="none" stroke="black" 
        x="0.5" y="0.5" width="79" height="39"/>

  <!-- Le rectangle est rempli avec un dégradé linéaire -->
  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"  
        x="10" y="10" width="60" height="20"/>
</svg>

Résultat

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<stop>' dans cette spécification.		 Candidat au statut de recommandation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<stop>' dans cette spécification.		 Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
stopChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?
offsetChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?
stop-colorChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?
stop-opacityChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : cdoublev
Dernière mise à jour par : cdoublev,