SVG 구형

SVG 모양

SVG는 사전 정의 된 도형 요소가, 사용 동작 개발자에 의해 사용될 수있다 :

• 직사각형 <RECT>
• 라운드 <원>
• 타원형 <타원>
• 선 <선>
• 폴리 라인 <폴리>
• 다각형 <다각형>
• 경로 <경로>

다음 섹션에서는 직사각형의 요소에서 시작, 당신에게 이러한 요소를 설명합니다.

SVG 사각형 - <RECT>

예 1

<사각형> 태그는 사각형 및 직사각형 변형을 생성하는 데 사용된다 :

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

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

코드 분석 :

• 폭과 높이 RECT 요소는 사각형의 높이와 폭을 정의하는 특성
• 스타일 속성은 CSS 속성을 정의하는 데 사용됩니다
• CSS 채우기 속성은 사각형 색상 (RGB 값, 색상 이름 또는 16 진수 값)를 입력 정의
• 스트로크 폭 CSS 속성의 폭은 직사각형 경계를 정의
• 스트로크 색상 CSS 속성은 사각형 테두리를 정의

예 2

의 또 다른 예를 살펴 보자, 그것은 새로운 속성의 수를 포함합니다 :

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

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

코드 분석 :

• X 속성은 사각형의 좌측 위치를 정의 (예를 들어, X는 = "0"브라우저 윈도우의 좌측에 사각형을 정의하는 거리가 0 픽셀)
• 탑 위치 (y)의 속성은 사각형을 정의한다 (예를 들어, Y = "0"브라우저 윈도우의 상단에 직사각형의 정의에서 0 픽셀이다)
• CSS의 채우기 불투명도 속성은 채우기 색상의 투명도를 정의 (법적 범위 : 0--1)
• CSS의 스트로크 - 불투명도 속성은 선 색상의 투명도를 정의 (법적 범위 : 0--1)

예 3

전체 요소의 불투명도를 정의합니다 :

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

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

• CSS 불투명도 속성은 투명 요소 (: 0-1 범위)의 값을 정의합니다.

예 4

마지막 예는 모서리가 둥근 직사각형을 만듭니다

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

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

• Rx 및 공예 속성은 모서리가 둥근 직사각형을 생성 할 수 있습니다.