Semicerchio SVG: Perché è ruotato?

Question

Sto sperimentando con elementi SVG. Sto cercando di creare un semicerchio semplice ma il mio semicerchio viene ruotato per qualche motivo? Come posso ottenere che il semicerchio non ruoti?

mia metodologia è:

• Lo SVG 'tela' è di 400 per 400 pixel, th0e semicerchio avrà un raggio di 180px
• punto MoveTo: 20.200 - M20,200
• LineTo: disegnare una linea lungo 360px & non cambia la posizione y - L360,0
• ArcTo: disegnare un arco per completare il cerchio, il raggio di l'arco è 180px - A180,180 0 0,1 20.200

In codice di questo è:

<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: Se voglio creare un grafico a torta che si trova a soli 275degrees, sarebbe il modo migliore essere per fare 2 percorsi, uno 180 gradi (il semicerchio sopra) & un altro percorso di 90 gradi? O è possibile creare questo con 1 percorso? Qualcuno sarebbe così gentile da mostrare un codice SVG di esempio?

Answer 1

Quando si utilizza lineto command, maiuscolo-L (L) specifica una coordinata assoluta mentre L minuscolo (l) specifica uno spostamento relativo. Sembra che tu volessi usare il comando relativo.

quanto come esempio, il grafico a torta-come uno sul W3 path's page utilizza un singolo percorso:

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

produce la parte rossa in questa immagine:

Note l'uso liberale di comandi (relativi) minuscoli.