什么是SVG中的笔画和笔画宽度以及它在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>

I've just started learning about SVGs and I am little confused about stroke and stroke width, and how they are rendered. In the developer tools, it looks strange whenever I increase the stroke width, the circle holding area increases but the dimensions are 100x100 always. I want to know if the stroke width is being added to the radius or am I confused on its rendering. Someone need to explain the concept behind the svgs or direct me to some pages so that i can learn deep

Answer 1

SVG stroke Property

• The stroke property defines the color of a line, text or outline of an element

SVG stroke-width Property

• The stroke-width property defines the thickness of a line, text or outline of an element

Check this w3schools article for svg properties

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

That problem that is showing to you is because the maximum stroke-width that you can apply to a circle with the radius 50px is 100px so it's a simple math. Your max stroke-width for r=50px is 2*r so it's 100px .

When you add stroke-width = 150 it means that the stroke-width radius need to be bigger to hande that. Chrome shows the circle as 100x100 and that's true the circle radius doesn't change only the stroke radius changes.

To prove that just change your stroke-width to 500px and you will clearly see how this is working and you will understand this.

This is also known as bug so you have this open issue in this link