Question

我正在尝试使用path元素绘制svg半圆，但我不了解命令的工作原理：

据我所知，命令采用以下参数

一个rx，ry旋转，不知道，不知道endx，不结束

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

在svg路径元素的末尾绘制半圆

2 个答案: