Qu'est-ce qu'un trait et une largeur de trait en SVG et comment cela est-il rendu dans le HTML ?

Question

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="50" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="100" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="150" fill="yellow"></circle></svg>

Je viens de commencer à me familiariser avec les SVG et je suis un peu perdue en ce qui concerne le trait et l'épaisseur du trait, et la manière dont ils sont rendus. Dans les outils de développement, il semble étrange que chaque fois que j'augmente la largeur du trait, la zone de maintien du cercle augmente mais les dimensions sont toujours de 100x100. Je voudrais savoir si l'épaisseur du trait est ajoutée au rayon ou si je suis confus quant à son rendu. Il faut que quelqu'un m'explique le concept derrière les svgs ou me dirige vers des pages pour que je puisse apprendre en profondeur.

Answer 1

Propriété du trait SVG

• La propriété stroke définit la couleur d'une ligne, d'un texte ou d'un contour de d'un élément

Propriété SVG stroke-width

• La propriété "stroke-width" définit l'épaisseur d'une ligne, d'un texte ou d'une image. contour d'un élément

Consultez ce site w3schools article pour les propriétés svg

SVG est basé sur XML, ce qui signifie que chaque élément est disponible au sein de dans le DOM SVG. Vous pouvez attacher des gestionnaires d'événements JavaScript à un élément.

En SVG, chaque forme dessinée est mémorisée comme un objet. Si les attributs d'un d'un objet SVG sont modifiés, le navigateur peut aut forme.

Le problème que vous rencontrez est dû au fait que la largeur maximale du trait que vous pouvez appliquer à un cercle d'un rayon de 50 px est de 100 px, c'est donc une simple question de calcul. Votre largeur de trait maximale pour r=50px est 2*r Il s'agit donc 100px .

Lorsque vous ajoutez largeur de trait = 150, cela signifie que le rayon de la largeur de trait doit être plus grand pour tenir compte de cette valeur. Chrome affiche le cercle comme 100x100 et c'est vrai que le rayon du cercle ne change pas, seul le rayon du trait change.

Pour s'en convaincre, il suffit de modifier l'épaisseur du trait pour qu'elle soit de 500px et vous verrez clairement comment cela fonctionne et vous le comprendrez.

Il s'agit également d'un bogue, et vous avez donc un problème ouvert dans ce domaine. lien