<stop>

Vous lisez la version anglaise de ce contenu car il n’existe pas encore de traduction dans cette langue. Aidez-nous à traduire cet article !

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 AndroidFirefox 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 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android Support complet 1.0
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 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android Support complet 1.0
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 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android Support complet 1.0
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 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi

Sujets associés
  1. Éléments SVG
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>