En SVG (Scalable Vector Graphics), la propriété <stroke> est utilisée pour définir le contour d'une forme. Il est souvent utilisé en conjonction avec les <path> , <rect> , <circle> et autres éléments SVG pour spécifier la couleur, la largeur et le style du trait. Voici quelques façons d’utiliser la propriété Stroke en SVG :

1. Trait de base : l'utilisation la plus basique de la propriété Stroke consiste à définir la couleur du trait. Vous pouvez utiliser l'attribut stroke pour définir la couleur. Par exemple:

    XML
    <circle cx="50" cy="50" r="40" stroke="black" />
   

   Dans cet exemple, l'élément <circle> aura un trait noir.

2. Largeur du trait : vous pouvez utiliser l'attribut stroke-width pour définir la largeur du trait. Par exemple:

    XML
    <rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="3" />
   

   Ce rectangle aura un trait bleu d'une largeur de 3 unités.

3. Opacité du trait : vous pouvez contrôler l'opacité du trait à l'aide de l'attribut stroke-opacity . Il prend une valeur comprise entre 0 (complètement transparent) et 1 (complètement opaque). Par exemple:

    XML
    <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="2" stroke-opacity="0.7" />
   

   Cette ligne aura un trait rouge avec une opacité de 70 %.

4. Stroke Dasharray : L'attribut stroke-dasharray vous permet de créer des traits en pointillés ou en pointillés. Vous pouvez spécifier une série de valeurs pour contrôler la longueur des tirets et des espaces. Par exemple:

    XML
    <line x1="10" y1="50" x2="90" y2="50" stroke="green" stroke-width="2" stroke-dasharray="5,3" />
   

   Cette ligne aura un trait pointillé vert avec un tiret de longueur 5 et un espace de longueur 3.

5. Stroke Linecap : L'attribut stroke-linecap définit la forme utilisée pour dessiner les extrémités d'un trait. Il peut prendre des valeurs telles que butt , round ou square . Par exemple:

    XML
    <line x1="20" y1="20" x2="80" y2="80" stroke="purple" stroke-width="5" stroke-linecap="round" />
   

   Cette ligne aura un trait violet avec des majuscules arrondies.

Ce ne sont là que quelques exemples de la façon dont vous pouvez utiliser la propriété Stroke en SVG. Expérimentez avec ces propriétés et valeurs pour obtenir les effets visuels souhaités pour les traits de vos graphiques SVG.