CODEWITHSUNDEEP
htmlsvg
dagda1
dagda1

Reputation: 28950

draw semicircle at the end of an svg path element

I am trying to draw an svg semicircle using a path element but I don't understand how the a command works:

From what I understand the a command takes the following parameters

a rx, ry rotate dontknow dontknow endx, endy

<svg class="hierarchy-icon__container" style="overflow: visible;" transform="translate(100, 100)"><g><path class="hierarchy-icon__path__cover" d="
        M-39.1875,-40
        h78.375
        a20,20 0 0 1 20,20 
        v100.31399917602539 
        a20,20 0 0 1 -20,20
        h -78.375 
        a20,20 0 0 1 -20,-20 
        v -100.31399917602539 
        a20,20 0 0 1 20,-20
        z
     "></path><path class="hierarchy-icon__path__menu" d="
    M46.265625,-40
    a1,1 0 0 10 92.515625,100.33100128173828 
    z
 "></path></g>
     </svg>

I don't understand how the rx, ry command affect the endx and endy.

How can I draw a semicircle path that is the same height as the first path?

Upvotes: 2

Views: 589

Answers (2)

enxaneta
enxaneta

Reputation: 33072

You need first to get the values for the points where the arc begins and where it ends. You are working with lowercase (relative) commands so everything is relative to the previous command.

The starting point for the arc is X: -39.1875 + 78.375 = 39.1875 and y: -40

The end point uses the same x (0) and the y is -40 + 100.31399917602539 = 140.31399917602539

140.31399917602539 is also the height of your first path, so the radius for the arc is 140.31399917602539 / 2 = 70.1569995880127

Putting it all together your second path should be:

M39.1875,-40 a70.1569995880127,70.1569995880127 0 0 1 0,140.31399917602539

or

M39.1875,-40 A70.1569995880127,70.1569995880127 0 0 1 39.1875,100.31399917602539

svg{border:1px solid}
path{stroke:black; fill:none;}
<svg class="hierarchy-icon__container" viewBox="-70 -50 250 160"><g>
 
  <circle cx="39.1875" cy="-40" r="3" />
  <circle cx="39.1875" cy="100.31399917602539" r="3" />
  <path class="hierarchy-icon__path__cover" 
d="
        M-39.1875,-40
        h78.375
        a20,20 0 0 1 20,20 
        v100.31399917602539 
        a20,20 0 0 1 -20,20
        h -78.375 
        a20,20 0 0 1 -20,-20 
        v -100.31399917602539 
        a20,20 0 0 1 20,-20
        z
     "></path><path class="hierarchy-icon__path__menu" d="
    M39.1875,-40
    a70.1569995880127,70.1569995880127 0 0 1 0,140.31399917602539"></path></g>
     </svg>

Upvotes: 3

A. Coote
A. Coote

Reputation: 11

So, from my understanding of SVG paths, you are starting from '-39.1875,-40' drawing a horizontal line of 78.357 length. You're then drawing an elliptical arc with radius 20, then you travel vertically for 100.313999.... points, followed by an elliptical arc of radius 20. To be the same height as the large rectangle you must therefore start at 49.1875, -40.

rx and ry, in absolutes don't matter so much (as far as I understand), but their relative proportions denote how elliptoid they are (eg rx 2, ry 1 will make an ellipse twice as wide as tall) This page has some great resources: https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

<svg class="hierarchy-icon__container" style="overflow: visible;" transform="translate(100, 100)"><g><path class="hierarchy-icon__path__cover" d="
        M-49.1875,-40
        h78.375
        a20,20 0 0 1 20,20 
        v100.31399917602539 
        a20,20 0 0 1 -20,20
        h -78.375 
        a20,20 0 0 1 -20,-20 
        v -100.31399917602539 
        a20,20 0 0 1 20,-20
        z
     "></path><path class="hierarchy-icon__path__menu" d="
    M49.1875,-40
    a1,1 0 0 10 140.515625,0
    z
 "></path></g>
     </svg>

Upvotes: 0

Related Questions