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 :-
JavaScript
x
15
15
1
<html>2
<body>3
4
<svg height="300" width="500">5
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="red" />6
7
<circle cx="152" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" />8
9
<circle cx="252" cy="50" r="40" stroke="black" stroke-width="10" paint-order="stroke" fill="none" />10
11
</svg> 12
13
</body>14
</html>15
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.
JavaScript
1
16
16
1
<html>2
<body>3
4
<svg height="300" width="500">5
6
<!-- Sample circle without overlap -->7
<circle cx="52" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" /> >8
9
<circle cx="152" cy="50" r="40" stroke="blue" stroke-width="20" paint-order="stroke" fill="none" />10
<!-- The circle at the top has a smaller radius equal to half the stroke of the lower circle -->11
<circle cx="152" cy="50" r="30" stroke="white" stroke-width="20" paint-order="stroke" fill="none" />12
13
</svg> 14
15
</body>16
</html>