Propriétés de tracé SVG

Propriétés de tracé SVG

SVG offre une large gamme de propriétés de tracé. Dans ce chapitre, nous discuterons des points suivants :

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

Toutes les propriétés de tracé peuvent être utilisées pour tout type de ligne, de texte et de contour d'élément (comme les cercles).

L'attribut stroke de SVG

stroke L'attribut définit la couleur des contours des lignes, des textes ou des éléments :

Ceci est le code SVG :

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

Essayer vous-même

L'attribut stroke-width de SVG

stroke-width L'attribut définit l'épaisseur des contours des lignes, des textes ou des éléments :

Ceci est le code SVG :

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

Essayer vous-même

L'attribut stroke-linecap de SVG

stroke-linecap L'attribut définit différents types de terminaisons pour les chemins ouverts :

Ceci est le code SVG :

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

Essayer vous-même

L'attribut stroke-dasharray de SVG

stroke-dasharray L'attribut est utilisé pour créer une ligne brisée :

Ceci est le code SVG :

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

Essayer vous-même