SVG Half Circle:为什么旋转？

Question

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

我的方法是:

• SVG'画布'是400乘400px,半圆的半径为180px
• MoveTo点: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命令时,uppercase-L(L)指定绝对坐标,而lowercase-L(l)指定相对移动.看起来你想使用相对命令.

举个例子,W3路径页面上类似饼图的路径使用单个路径:

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

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

注意自由使用小写(相对)命令.