SVG Yarım Daire: Neden döndürülüyor?

Question

SVG öğeleriyle denemeler yapıyorum. Basit bir yarım daire oluşturmaya çalışıyorum ama yarım daire bir sebepten dolayı döndürülüyor mu? Dönmemesi için yarım daireyi nasıl alabilirim?

My metodolojidir:

SVg tuval '400 pikselden ile 400

• , th0e yarım daire 180pks
• MoveTo noktası çapındaki sahip olacaktır: 20,200 - M20,200
• LineTo: bir çizgi çizin 360px uzun & y konumunu değiştirmez - L360,0
• ArcTo: daireyi tamamlamak için bir ark çizin. olur, en iyi yolu sadece 275degrees olan bir pasta grafik oluşturmak isterseniz:

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

kodunda bu A180,180 0 0,1 20,200 - yay 180pks olduğunu 2 yol, bir 180 derece (yarım daire) & 90 derece başka bir yol yapmak mı? Veya 1 Yolu ile bunu oluşturmak mümkün mü? Bir örnek SVG kodunu gösterecek kadar nazik olur mu?

Answer 1

lineto command, büyük harf-L (L) kullanıldığında, küçük harf L (l) göreli bir hareket belirtirken mutlak bir koordinat belirtir. Göreceli komutu kullanmak istediğiniz gibi görünüyor.

Bildiğim kadarıyla bir örnek olarak, W3 path's page üzerine pasta grafik benzeri bir tek yolu kullanır

:

Not:

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

bu resimde kırmızı parçasını üretir küçük harfli (göreceli) komutların liberal kullanımı.