Tuto SVG 04 - Style et peinture

Public visé: dev lambda.

Objectif

• Maîtriser fill, stroke, stroke-width, opacity et les styles CSS.

Références W3C

• SVG 2 - Painting: https://www.w3.org/TR/SVG2/painting.html
• SVG 2 - Styling: https://www.w3.org/TR/SVG2/styling.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="130" viewBox="0 0 220 130">
  <style>
    .accent { fill: #3a6ea5; stroke: #0f2d40; stroke-width: 3; }
  </style>
  <rect x="10" y="10" width="80" height="60" class="accent"/>
  <circle cx="150" cy="40" r="25" fill="none" stroke="#333" stroke-width="4" stroke-dasharray="6 4"/>
  <rect x="120" y="80" width="80" height="40" fill="#f2c94c" opacity="0.7"/>
</svg>

tutos-svg-04-style-et-peinture.svg

À retenir

• Les attributs de présentation (fill, stroke, etc.) sont simples pour démarrer.
• CSS aide à mutualiser un style entre plusieurs éléments.
• opacity s'applique à tout l'élément, pas seulement au fill.

Exercice

• Remplace opacity par fill-opacity et compare.