html - SVG 半圆 : Why is it rotated?

Question

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

我的方法是:

• SVG“ Canvas ”为 400 x 400 像素，半圆的半径为 180 像素
• 移动点:20,200 - M20,200
• LineTo:画一条 360px 长的线并且不改变 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 Path 创建它？是否有人愿意展示示例 SVG 代码？

Answer 1

使用 lineto command 时, uppercase-L (L) 指定绝对坐标，而 lowercase-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" />

生成此图像中的红色部分:

请注意小写(相对)命令的自由使用。