Nửa vòng SVG: Tại sao nó được xoay?

Question

Tôi đang thử nghiệm với các yếu tố SVG. Tôi đang cố gắng tạo ra một nửa vòng tròn đơn giản nhưng vòng tròn nửa của tôi được xoay vì một lý do nào đó? Làm thế nào tôi có thể nhận được vòng tròn nửa không xoay?

phương pháp của tôi là:

• Các SVG 'vải' là 400 bởi 400px, th0e nửa vòng tròn sẽ có một bán kính của 180px
• điểm MoveTo: 20.200 - M20,200
• LineTo: vẽ một đường thẳng dài 360px & không thay đổi vị trí y - L360,0
• ArcTo: vẽ một vòng cung để hoàn thành vòng tròn, bán kính của arc là 180px - A180,180 0 0,1 20.200

Trong mã này là:

<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: Nếu tôi muốn tạo ra một biểu đồ pie mà chỉ 275degrees, sẽ là cách tốt nhất có thể tạo 2 đường dẫn, một 180 độ (vòng tròn nửa bên trên) & một đường khác là 90 độ? Hoặc bạn có thể tạo điều này với 1 Đường dẫn? Có phải mọi người sẽ đủ tử tế để hiển thị mã SVG mẫu không?

Answer 1

Khi sử dụng lineto command, chữ hoa-L (L) chỉ định tọa độ tuyệt đối trong khi chữ thường L (l) chỉ định di chuyển tương đối. Có vẻ như bạn muốn sử dụng lệnh tương đối.

Theo như một ví dụ, một chiếc bánh-biểu đồ giống như trên W3 path's page sử dụng một con đường duy nhất:

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

sản xuất phần màu đỏ trong hình ảnh này:

Note việc sử dụng tự do các lệnh thường (tương đối).