SVG Half Circle：爲什麼旋轉？

我正在嘗試使用SVG元素。我正在嘗試創建一個簡單的半圈，但由於某種原因，我的半圈旋轉了？我怎樣才能讓半圈不旋轉？SVG Half Circle：爲什麼旋轉？

enter image description here

我的方法是：

SVG的 '畫布' 是400 x 400像素，th0e半圈將有180像素
通過MoveTo點半徑：20200 - M20,200
LineTo：畫出一條長360px的線&不改變y的位置 - L360,0
ArcTo：繪製圓弧完成圓，半徑電弧180像素 - A180,180 0 0,1 20200

在這段代碼是：

<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代碼示例？

來源

2012-01-09 Jake M

http://jsfiddle.net/JqKpf/ – user455318 2012-01-09 04:19:23

當使用lineto command時，大寫字母-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" />

產生這個圖像中的紅色部分：

example image

注自由使用小寫（相對）命令。

來源

2012-01-09 04:15:46

SVG Half Circle：爲什麼旋轉？

回答

相關問題