HTML에서 SVG를 사용하여 원을 만들거나 그리는 방법은 무엇입니까?

Originally posted here!

원을 만들려면 HTML의 circle 요소 안에 svg 요소를 사용할 수 있습니다.

TL;DR

<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>

예를 들어 반지름 길이가 30px인 원을 만들려면 먼저 다음과 같이 circle 요소 내부에 svg 요소를 정의할 수 있습니다.

<!-- Create circle in SVG -->
<svg>
  <circle />
</svg>

그러나 이것만으로는 화면에 원을 그리는 방법을 모르기 때문에 화면에 아무것도 표시되지 않습니다. 이를 위해 다음과 같이 circle 요소에 몇 가지 속성을 설정해야 합니다.

cx 속성은 x-axis 또는 x 좌표에서 원의 중심을 정의합니다.

cy 속성은 y-axis 또는 y 좌표에서 원의 중심을 정의합니다.

r 속성은 반지름을 나타내며 원이 그릴 반지름의 길이를 정의합니다.

따라서 이렇게 보일 수 있습니다.

<!-- Create circle in SVG -->
<svg>
  <circle cx="30" cy="30" r="30" />
</svg>

그래서 결국 이렇게 화면에 원을 그리게 됩니다.



그리고 우리는 HTML에서 SVG를 사용하여 성공적으로 원을 그렸습니다. 예이 🎊!

JSBin에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.