Propriétés de trait SVG
Propriétés de trait SVG
SVG offre une large gamme de propriétés de trait. Dans ce chapitre, nous examinerons les points suivants :
- accident vasculaire cérébral
- largeur du trait
- trait-linecap
- course-dasharray
Toutes les propriétés de trait peuvent être appliquées à tout type de lignes, de texte et de contours d'éléments comme un cercle.
Propriété de trait SVG
La propriété stroke définit la couleur d'une ligne, d'un texte ou d'un contour d'un élément :
Voici le code SVG :
Exemple
<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>
Propriété de largeur de trait SVG
La propriété stroke-width définit l'épaisseur d'une ligne, d'un texte ou d'un contour d'un élément :
Voici le code SVG :
Exemple
<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>
Propriété SVG stroke-linecap
La propriété stroke-linecap définit différents types de terminaisons pour un chemin ouvert :
Voici le code SVG :
Exemple
<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>
Propriété SVG stroke-dasharray
La propriété stroke-dasharray est utilisée pour créer des lignes pointillées :
Voici le code SVG :
Exemple
<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>