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