SVG 반원 : 왜 회전합니까?

Question

SVG 요소를 실험하고 있습니다. 간단한 반원을 만들려고하는데 반원이 어떤 이유로 회전 되었습니까? 반원이 회전하지 못하게하려면 어떻게해야합니까?

내 방법은 다음과 같습니다

는 SVG '캔버스'400 픽셀로 400

• 이 th0e 반원이 180px
• 하면 MoveTo 지점의 반경해야합니다 : 20,200 - M20,200
을
• LineTo : 360px 길이의 선을 그립니다 & y 위치가 변경되지 않음 - L360,0
• ArcTo : 원을 완성하기 위해 호를 그립니다. 것, 가장 좋은 방법 난 단지 275degrees있는 파이 차트를 만들려면 :

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

  추신 :

코드에서 이것이 A180,180 0 0 20,200 - 아크는 180px입니다 2 개의 경로, 하나의 180도 (위의 반원) & 다른 경로를 90 도로 만들 수 있습니까? 또는 1 Path?으로 이것을 생성 할 수 있습니까? SVG 코드 예제를 보여줄 정도로 친절한 사람이 있습니까?

Answer 1

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" /> 

이 이미지의 적색 부분을 생성을 소문자 (상대) 명령의 자유로운 사용.