I am facing a problem while increasing stroke width. When I am using the attribute paint-order=”stroke” it’s not meet my requirement, because stroke width increasing on both sides (inside and outside). Please look into the attached images.
original svg :-
Actual svg :-
Expected svg(Which is my requirement) :-
Code :-
<html>
<body>
<svg height="300" width="500">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="red" />
<circle cx="152" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" />
<circle cx="252" cy="50" r="40" stroke="black" stroke-width="10" paint-order="stroke" fill="none" />
</svg>
</body>
</html>
Advertisement
Answer
A stroke with a width of 20px of a circle is symmetrically located on either side of the centerline. 10px outside, 10px inside the circle
The circle at the top has a smaller radius equal to half the stroke of the lower circle 40 - 10 = 30px
Therefore, the inside of the stroke of the lower, larger circle will be hidden. Only the outside of the large circle will be visible.
<html>
<body>
<svg height="300" width="500">
<!-- Sample circle without overlap -->
<circle cx="52" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" /> >
<circle cx="152" cy="50" r="40" stroke="blue" stroke-width="20" paint-order="stroke" fill="none" />
<!-- The circle at the top has a smaller radius equal to half the stroke of the lower circle -->
<circle cx="152" cy="50" r="30" stroke="white" stroke-width="20" paint-order="stroke" fill="none" />
</svg>
</body>
</html>