SVG Half Circle: почему он вращается?

Question

Я экспериментирую с элементами SVG. Я пытаюсь создать простой полукруг, но по какой-то причине мой полукруг повернут? Как я могу заставить полукруг не вращаться?

Моя методология:

• SVG «холст» имеет размер 400 на 400 пикселей, полукруг будет иметь радиус 180 пикселей
• MoveTo Point: 20 200 - M 20 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 верхний регистр-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" />

создает красную часть на этом изображении:

Обратите внимание на либеральное использование строчных (относительных) команд.