SVG半圆：为什么要旋转？

Question

我正在尝试使用SVG元素进行实验。我试图创建一个简单的半圆形，但是我的半圆形因某种原因而旋转了？我如何使半圆形不旋转？

我的方法是：

• SVG“画布”的大小为400x400像素，半圆的半径为180像素
• MoveTo点：20,200 - M20,200
• LineTo：绘制长度为360像素且不改变y位置的线条 - L360,0
• ArcTo：绘制弧形以完成圆形，弧形的半径为180像素 - 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代码示例？

- sazr

Answer 1

使用lineto命令时，大写字母L（L）表示绝对坐标，小写字母l（l）表示相对移动。看起来你想使用相对命令。

至于示例，W3路径页面上的饼图使用单个路径：

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

这个图像中产生了红色部分：

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

- Nick T