Latest web development tutorials

SVG 타원

SVG 타원 - <타원>

예 1

LT, 타원> 요소는 타원을 만드는 데 사용됩니다 :

타원형과 매우 유사 라운드. 타원은 X 및 Y의 상이한 반경을 가지며, 원형의 x 및 y 반경이 동일한 것을 제외

다음은 SVG 코드는 다음과 같습니다

예

<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>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

코드 분석 :

  • X CX는 타원의 정의 센터 속성 좌표
  • Y CY 속성 좌표는 타원의 중심을 정의
  • 수평 반경 RX 속성 정의
  • 수직 반경 공예 속성 정의

예 2

다음의 예는 세 및 타원형에 heaped 작성

다음은 SVG 코드는 다음과 같습니다

예

<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>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 3

다음 예제에서는 두 개의 타원을 (노란색과 흰색) 결합 :

다음은 SVG 코드는 다음과 같습니다

예

<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>

»시도

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).