SVG 가이드

SVG 요소

SVG <ellipse>로 타원 그리기

SVG <ellipse> 요소는 원을 그리기 위해 사용됩니다. 원은 높이와 너비가 다른 원입니다. 다시 말해, x와 y 방향의 반지름은 다릅니다.

SVG 원 예제

이는 원을 그리는 예제 코드입니다:

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15"
　　　　　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

테스트를 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

원 cx, cy는 원과 같이 중앙에 위치합니다. 하지만 x와 y 방향의 반지름은 두 개의 속성(r, y 속성)으로 지정됩니다: rx와 ry 속성. rx 속성이 ry 속성보다 크기 때문에 원이 높이보다 넓어 보입니다. rx와 ry 속성을 같은 숫자로 설정하면 원이 생성됩니다.

stroke-테두리 너비 설정

style 속성 stroke를 사용할 수 있습니다-width는 원의 테두리 너비를 설정합니다. 예제:

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;fill: none;"/>
</svg>

테스트를 보세요 ‹/›

실행 후 결과 이미지는 다음과 같습니다:

점선 테두리 원

style 속성 stroke를 사용할 수 있습니다-dasharray는 원의 테두리를 점선으로 만듭니다.:

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill: none;"/>
</svg>

테스트를 보세요 ‹/›

이 예제에서 점선 너비는 설정되었습니다:10점선 공간(점선 사이의 간격)이 설정되었습니다:5이는 원을 렌더링할 때의 모습입니다:

투명한 테두리

style 속성 stroke를 사용할 수 있습니다-opacity는 SVG 원의 테두리를 반투명하게 만듭니다.

예제

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　stroke-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
</svg>

테스트를 보세요 ‹/›

코드 실행 후 SVG 원 효과는 다음과 같습니다:

둘째 (파란색) 원은 투명하며, 그 위에 적색 원이 어떻게 보이는지 확인할 수 있습니다.

원 채우기

원을 채우기 위해 fill 스타일 속성을 사용할 수 있습니다:

예제

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

테스트를 보세요 ‹/›

실행 후 SVG 원의 모습은 다음과 같습니다:

투명도가 있는 채우기

fill-opacity 스타일 속성은 타원의 채우기 색상의 불투명도(투명도)를 설정할 수 있습니다:

예제

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: none;/ellipse>
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;"></ellipse>
</svg>

테스트를 보세요 ‹/›

타원이 렌더링될 때의 모습은 다음과 같습니다:

두 번째(파란색) 타원은 반투명이어서 빨간 타원이 보입니다.

SVG <line>로 직선 그리기 SVG <circle>로 원 그리기