Propriété de trait SVG

SVG fournit une large gamme de propriétés de trait. Dans ce chapitre, nous examinerons les éléments suivants :

trait
largeur de trait
Stroke-linecap
Stroke-dasharray

Toutes les propriétés de trait pouvant être appliquées à tout type de lignes, de texte et d'éléments comme un cercle contour.

Attribut de trait SVG

L'attribut de trait définit la couleur du contour d'une ligne, d'un texte ou d'un élément :

Voici le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).

Attribut SVG Stroke-width

L'attribut TStroke-width définit l'épaisseur d'une ligne, d'un texte ou du contour d'un élément :

Voici le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>
 
</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" bouton pour afficher l'instance en ligne

Pour les utilisateurs d'Opera : Afficher le fichier SVG (clic droit sur la source d'aperçu graphique SVG).

Attribut SVG Stroke-linecap

L'attribut Strokelinecap définit la terminaison des différents types de chemins ouverts :

Voici le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour visualiser le fichier en ligne instance

Pour les utilisateurs d'Opera : affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).

Attribut SVG Stroke-dasharray

L'attribut Strokedasharray est utilisé pour créer des lignes pointillées :

Voici le code SVG :

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Pour les utilisateurs d'Opera : Afficher le fichier SVG (clic droit sur la source de l'aperçu graphique SVG).

Propriété de trait SVG