I am playing around with SVG images. In the following code:
<svg height="250px" width="250px">
<circle
r="120"
cx="125"
cy="125"
fill="#334d5c"
stroke="#e27a3f"
stroke-width="1px"
/>
</svg>
when I increase the stroke-width property, it starts to change the radius of the circle, making it smaller.
My questions are: What is the ratio or rate of change of this process? How do the additional pixels get added to the radius of the circle? Is there a way to remove this effect?
Thank you for you time.
The radius decreases by half the stroke width.
If you want the circle fill to not decrease in size, then the simplest workaround is to have two circles. Put the one with the stroke behind the one with the fill.
But note that, if you use this method, half the stroke width will be hidden by the front circle. So if you need a 10px stroke, you would actually need to set the stroke-width to 20px.
<svg height="250px" width="250px">
<circle
r="120"
cx="125"
cy="125"
fill="#334d5c"
stroke="#e27a3f"
stroke-width="10px"
/>
</svg>
<svg height="250px" width="250px">
<circle r="120" cx="125" cy="125"
stroke="#e27a3f" stroke-width="10px"/>
<circle r="120" cx="125" cy="125"
fill="#334d5c"/>
</svg>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments