SVG 타원
예제 1
lt;ellipse> 요소는 타원을 만드는 데 사용됩니다.
타원은 원과 매우 유사합니다. . 차이점은 타원은 x와 y 반지름이 다르지만 원은 x와 y 반지름이 같다는 것입니다.
SVG 코드는 다음과 같습니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera 사용자의 경우: SVG 파일 보기(오른쪽 클릭) SVG 그래픽 미리보기 소스).
코드 분석:
CX 속성으로 정의된 타원 중심의 x 좌표
CY 속성 정의된 타원 중심의 y 좌표
RX 속성에 의해 정의된 수평 반경
RY에 의해 정의된 수직 반경 속성
예제 2
다음 예에서는 세 개의 쌓인 타원을 만듭니다.
다음은 SVG 코드입니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera 사용자의 경우: SVG 파일 보기(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
예 3
다음 예는 두 개의 타원(노란색 하나와 흰색 하나)을 결합합니다.
SVG 코드는 다음과 같습니다.
인스턴스
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
