SVG
Couleurs

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Recherche…


Couleurs nommées - utilisez des noms prédéfinis pour les attributs de remplissage et de trait

Une liste des noms de mots-clés de couleur reconnus peut être trouvée dans la recommandation W3C pour SVG . 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="red" stroke="green" />
  <rect x="200" y="200" width="50" height="50" fill="yellow" stroke="blue" />
</svg>

Couleurs RVB utilisant la notation hexadécimale

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#ff0000" stroke="#00ff00" />
  <rect x="200" y="200" width="50" height="50" fill="#ffff00" stroke="#00ffff" />
</svg>

Comme ci-dessus en utilisant la forme hexadécimale abrégée : 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#f00" stroke="#0f0" />
  <rect x="200" y="200" width="50" height="50" fill="#ff0" stroke="#0ff" />
</svg>

Couleurs RVB avec notation fonctionnelle - valeurs entières ou pourcentages

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="rgb(255, 0, 0)" stroke="rgb(0, 255, 0)" />
  <rect x="200" y="200" width="50" height="50" fill="rgb(100%, 100%, 0%)" stroke="rgb(0%, 100%, 100%)" />
</svg>

En notation fonctionnelle, les valeurs RGBA sont également prises en charge. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle r="30" cx="100" cy="100" fill="rgba(255, 0, 0, 0.5)" stroke="rgba(0, 255, 0,5 0.5)" />
    <rect x="200" y="200" width="50" height="50" fill="rgba(100%, 100%, 0%, 0.5)" stroke="rgba(0, 100%, 100%, 0.5)" />
</svg>

Le mot clé currentColor

currentColor est le plus utile dans les SVG en ligne. Avec cela, vous pouvez hériter de la couleur css des parents et l'utiliser partout où les couleurs sont utilisées dans SVG.

Dans cet exemple, le premier cercle utilise la couleur du texte comme couleur de remplissage et le deuxième cercle l'utilise comme couleur de trait. 

<html>
    <head>
        div{color:green}
    </head>
    <body>
        <div>
            some Text
            <svg width="2em" height="1em" viewBox="0 0 200 100">
                <circle cx="50" cy="50" r="45" fill="currentColor"/>
                <circle cx="150" cy="50" r="45" fill="none" stroke-width=5 stroke="currentColor"/>
            </svg>
        </div>
    </body>
</html>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow