SVG Half Circle: ¿Por qué se gira?

Question

Estoy experimentando con elementos SVG. Intento crear un semicírculo simple pero mi semicírculo rota por alguna razón. ¿Cómo puedo hacer que el medio círculo no gire?

Mi metodología es la siguiente:

• El SVG 'lienzo' es de 400 por 400 píxeles, th0e medio círculo tendrá un radio de 180px
• punto MoveTo: 20200 - M20,200
• LineTo: dibujar una línea 360px de largo & no cambia la posición y - L360,0
• ArcTo: dibuja un arco para completar el círculo, el radio de el arco es 180px - A180,180 0 0,1 20.200

En este código es:

<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> 

PD: Si quiero crear un gráfico circular que es sólo 275degrees, sería la mejor manera ser para hacer 2 caminos, uno 180 grados (el medio círculo arriba) & otra ruta de 90 grados? ¿O es posible crear esto con 1 ruta? ¿Sería alguien tan amable de mostrar un código SVG de ejemplo?

Answer 1

Al usar lineto command, mayúscula-L (L) especifica una coordenada absoluta mientras que L minúscula (l) especifica un movimiento relativo. Parece que querías usar el comando relativo.

Por lo que un ejemplo, el gráfico circular-como en el W3 path's page utiliza un solo camino:

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

produce la parte roja en esta imagen:

Nota el uso liberal de comandos en minúsculas (relativos).