svg 원 그리기 <circle>

<circle> 는 원을 만들때 사용하는 태그이다.

 

html

<div class="svg-box">
    <svg class="svg">
        <circle class="circle1" cx="80" cy="80" r="60"/>
    </svg>
    <svg class="svg">
        <circle cx="80" cy="80" r="60" stroke="#317773" stroke-width="3" fill="#E2D0F9"></circle>
    </svg>
</div>

css

.svg-box .svg {width: 160px; height: 160px;}
.circle1 {
    fill: #317773;
}

 

코드 설명

• cx : 원을 중심으로 x 좌표값을 설정
• cy : 원을 중심 y 좌표값을 설정
• cx, cy 값이 생략되면 기본값은 (0,0)
• r : 원의 반지름 설정
• stroke : 선의 색상
• stroke-width : 선의굵기
• fill : 원의 내부 색상

 

 

 

 

 

참고

https://www.w3schools.com/graphics/svg_circle.asp

https://developer.mozilla.org/ko/docs/Web/SVG/Element/circle