How to increase stroke outside of svg path without using paint-order=“stroke”?

Tags: , , ,



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 :-

enter image description here

Actual svg :-

enter image description here

Expected svg(Which is my requirement) :-

enter image description here

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>

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>


Source: stackoverflow