HTML에서 circle svg 요소의 배경색을 설정하는 방법은 무엇입니까?

Originally posted here!
circle SVG 요소의 배경색을 설정하려면 HTML의 fill 태그 안의 circle 요소에서 svg 속성을 사용할 수 있습니다.

TL;DR

<!-- Set background color on 'circle' svg element -->
<svg>
  <circle cx="30" cy="30" r="30" fill="red" />
</svg>

예를 들어 red svg 요소에 색상circle을 설정하려면 fill 속성을 사용하고 그 값을 다음과 같이 문자열red로 설정합니다.

<!-- Set background color on 'circle' svg element -->
<svg>
  <circle fill="red" />
</svg>

그러나 브라우저가 모양을 그리기 시작할 위치를 모르기 때문에 이것만으로는 화면에 아무 것도 표시되지 않습니다. 이를 위해서는 cx , cy , r 와 같은 다른 3가지 속성도 추가해야 합니다. 이러한 속성에 대해 자세히 알아보려면 How to create or draw a circle using SVG in HTML?
을 확인하십시오.

그래서 결국 이렇게 될 것입니다.

<!-- Set background color on 'circle' svg element 🔥 -->
<svg>
  <circle cx="30" cy="30" r="30" fill="red" />
</svg>

JSBin 에 있는 위의 코드를 참조하세요.

그게 다야 😃!

😃 유용하셨다면 공유해 주세요.