Style et Couleur

Pour modifier le style et la couleur en SVG, on peut passer par des attributs ou par le css.

DéfinitionRemplissage

Couleur de remplissage

fill

1
<svg width="300" height="200">
2
    <rect fill='red' x="50" y="20" rx="20" ry="20" width="150" height="150" />
3
</svg>

ou

1
<svg width="300" height="200">
2
    <rect style="fill:red" x="50" y="20" rx="20" ry="20" width="150" height="150" />
3
</svg>
SVG - Style

Opacité

fill-opacity

1
<svg width="300" height="200">
2
  <rect fill="blue" x="140" y="40" width="110" height="110" />
3
  <rect fill="red" fill-opacity=0.8 x="50" y="20" width="150" height="150" />
4
</svg>

ou

1
<svg width="300" height="200">
2
  <rect style="fill:blue" x="140" y="40" width="110" height="110" />
3
  <rect style="fill:red;fill-opacity:0.8" x="50" y="20" width="150" height="150" />
4
</svg>
SVG - Style

DéfinitionBordure

Couleur de bordure

stroke

1
<svg width="300" height="200">
2
  <rect stroke='red' fill='none' x="50" y="20" width="150" height="150" />
3
</svg>
SVG - Style

Épaisseur de bordure

stroke-width

1
<svg width="300" height="200">
2
  <rect stroke-width=10 stroke='red' fill='none' x="50" y="20" width="150" height="150" />
3
</svg>
SVG - Style

Opacité

stroke-opacity

1
<svg width="300" height="200">
2
    <rect fill="blue" x="140" y="40" width="110" height="110" />
3
    <rect stroke-opacity=0.5 stroke-width=10 stroke='red' fill='none' x="50" y="20" width="150" height="150" />
4
</svg>
SVG - Style

Forme de fin de ligne

stroke-linecap (butt, square, round)

1
<svg width="300" height="200">
2
  <line stroke-linecap="butt" stroke-width="10" stroke="black" x1="20" y1="20" x2="280" y2="20" />
3
  <line stroke-linecap="square" stroke-width="10" stroke="black" x1="20" y1="70" x2="280" y2="70" />
4
  <line stroke-linecap="round" stroke-width="10" stroke="black" x1="20" y1="120" x2="280" y2="120" />
5
</svg>
SVG - Style

Jonction des lignes

stroke-linejoin (mitter, round, bevel)

1
<svg width="300" height="200">
2
  <polyline stroke-linejoin="mitter" stroke-width="20" stroke="black" fill="none" points="20,100 150,20 280,100" />
3
  <polyline stroke-linejoin="round" stroke-width="20" stroke="black" fill="none" points="20,140 150,60 280,140" />
4
  <polyline stroke-linejoin="bevel" stroke-width="20" stroke="black" fill="none" points="20,180 150,100 280,180" />
5
</svg>
SVG - Style

style pointillés

stroke-dasharray (trait, espace)

1
<svg width="300" height="200">
2
  <line stroke-dasharray="5,10" stroke-width="5" stroke="black" x1="20" y1="20" x2="280" y2="20" />
3
  <line stroke-dasharray="5,10,15" stroke-width="5" stroke="black" x1="20" y1="70" x2="280" y2="70" />
4
  <line stroke-dasharray="5,10,15,20" stroke-width="5" stroke="black" x1="20" y1="120" x2="280" y2="120" />
5
</svg>
SVG - Style