нарисовать полукруг в конце элемента пути svg

Question

Я пытаюсь нарисовать svg полукруг, используя элемент path, но я не понимаю, как работает команда:

Насколько я понимаю, команда принимает следующие параметры

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>

Я не понимаю, как команда rx, ry влияет на endx и endy.

Как я могу нарисовать полукруглый путь такой же высоты, как и первый путь?

Answer 1

Сначала нужно получить значения для точек, где начинается дуга и где она заканчивается. Вы работаете со строчными (относительными) командами, поэтому все относится к предыдущей команде.

Начальная точка для дуги: X: -39,1875 + 78,375 = 39,1875 и y: -40

.

В конечной точке используется тот же x (0), а y равно -40 + 100.31399917602539 = 140.31399917602539

140.31399917602539 также является высотой вашего первого пути, поэтому радиус для дуги равен 140.31399917602539 / 2 = 70.1569995880127

Собирая все вместе, ваш второй путь должен быть:

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

или

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>

Answer 2

Итак, исходя из моего понимания путей SVG, вы начинаете с '-39.1875, -40', рисуя горизонтальную линию длиной 78.357.Затем вы рисуете эллиптическую дугу с радиусом 20, затем вы путешествуете вертикально для 100.313999 .... точек, за которыми следует эллиптическая дуга с радиусом 20. Таким образом, чтобы быть такой же высоты, как большой прямоугольник, вы должны поэтому начать с 49.1875, -40.

rx и ry, в абсолютах не имеют большого значения (насколько я понимаю), но их относительные пропорции обозначают, насколько они эллиптоидные (например, rx 2, ry 1 сделает эллипс в два раза шире своего роста) У этой страницы есть несколько замечательных ресурсов: 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>