SVG Half Circle: Dlaczego jest obracany?

Question

Eksperymentuję z elementami SVG. Próbuję utworzyć proste półkole, ale moje półokręgu obraca się z jakiegoś powodu? Jak sprawić, by półkole nie obracało się?

Moja metodologia jest:

• SVG 'płótno' jest 400 przez 400 pikseli, th0e pół okrąg będzie mieć promień 180px
• punkt MoveTo: 20.200 - M20,200
• LineTo: narysuj linię o długości 360 pikseli & nie zmienia położenia y - L360,0
• ArcTo: narysuj łuk, aby wypełnić okrąg, promień łuk jest 180px - A180,180 0 0,1 20.200

W kodzie jest:

<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: Jeśli chcesz utworzyć wykres kołowy, który jest tylko 275degrees, będzie najlepszym sposobem zrobić dwie ścieżki, jedną 180 stopni (półkola powyżej) & kolejną ścieżkę 90 stopni? A może jest to możliwe dzięki 1 Ścieżce? Czy ktoś byłby na tyle uprzejmy, aby pokazać przykładowy kod SVG?

Answer 1

Podczas korzystania z , wielka litera-L (L) określa bezwzględną współrzędną, podczas gdy mała litera-L (l) określa ruch względny. Wygląda na to, że chcesz użyć polecenia względnego.

Jeśli chodzi o przykład, jeden wykres kołowy, jak na W3 path's page wykorzystuje pojedynczą ścieżkę:

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

wytwarza czerwoną udział w tym obrazie:

Note liberalne użycie małych (względnych) poleceń.