SVG Half Circle：为什么旋转？

Question

我正在尝试使用SVG元素。我试图创建一个简单的半圆但我的半圆由于某种原因旋转？如何让半圆不旋转？

我的方法是：

• SVG'画布'是400乘400px，半圆半径为180px
• MoveTo点数：20,200 - M20,200
• LineTo：绘制一条360px长的线条＆amp;不会改变y位置 - L360,0
• ArcTo：画圆弧完成圆弧，圆弧半径为180px - A180,180 0 0,1 20,200

在代码中，这是：

<svg width="400" height="400">
    <path d="M20,200 L360,0 A180,180 0 0,1 20,200 z"
        style="fill:#ff0000;
            fill-opacity: 1;
            stroke:black;
            stroke-width: 1"/>
</svg>

PS：如果我想创建一个只有275度的饼图，最好的方法是制作2条路径，一条180度（上面的半圈）和另一条90度的路径？或者是否可以使用 1路径创建此功能？那么有人会非常友好地展示一个示例SVG代码吗？

Answer 1

使用lineto command时，大写-L（L）指定绝对坐标，而小写-L（l）指定相对移动。看起来你想使用相对命令。

就例子而言，W3 path's page上类似饼图的使用单一路径：

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
    fill="red" stroke="blue" stroke-width="5" />

在此图像中生成红色部分：

注意自由使用小写（相对）命令。