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

Question

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

Моя методика:

• The SVG 'холст' является 400 по 400px, th0e полукруг будет иметь радиус 180px
• MoveTo точка: 20,200 - M20,200
• LineTo: нарисовать линию 360px long & не меняет положение 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: Если я хочу создать круговую диаграмму, которая только 275degrees, будет лучшим способом сделать 2 пути, одну 180 градусов (половина круга выше) & другой путь 90 градусов? Или можно создать это с помощью 1 Путь? Неужели кто-нибудь будет достаточно любезен, чтобы показать пример SVG-кода?

Answer 1

При использовании lineto command, uppercase-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" /> 

производит красную часть на этой картинке:

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