SVG 직사각형
SVG 모양
SVG에는 개발자가 사용하고 조작할 수 있는 사전 정의된 모양 요소가 있습니다.
사각형 < 직사각형>
원<원>
타원<타원>
선<선>
폴리라인<폴리라인>
폴리곤<폴리곤>
경로
다음 장에서는 직사각형 요소부터 시작하여 이러한 요소를 설명합니다.
SVG 직사각형 - <Rect>
예 1
<Rect> 태그를 사용하여 직사각형뿐만 아니라 직사각형 변형도 만들 수 있습니다.
다음은 SVG 코드입니다.
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>
인스턴스 실행»
"실행"을 클릭합니다. 온라인 인스턴스를 보려면 인스턴스" 버튼을 클릭하세요.
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
코드 분석:
직사각형 요소의 너비 및 높이 속성은 직사각형의 높이와 너비를 정의할 수 있습니다
-
style 속성은 CSS 속성을 정의하는 데 사용됩니다
CSS의 fill 속성은 사각형의 채우기 색상(rgb 값, 색상 이름 또는 16진수 값)을 정의합니다.
CSS의 스트로크 너비 속성은 사각형 테두리의 너비를 정의합니다.
CSS의 스트로크 속성은 사각형 테두리의 색상을 정의합니다.
예제 2
몇 가지 새로운 속성이 포함된 또 다른 예를 살펴보겠습니다.
SVG 코드는 다음과 같습니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일 보기(소스를 미리 보려면 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석:
x 속성은 직사각형의 왼쪽 위치를 정의합니다. 예를 들어 x="0"은 직사각형을 정의합니다. 브라우저 창 왼쪽 측면으로부터의 거리는 0px)
y 속성은 직사각형의 상단 위치를 정의합니다(예: y="0"은 직사각형으로부터의 거리를 정의합니다) (브라우저 창 상단까지 0px)
CSS의 fill-opacity 속성은 채우기 색상의 투명도를 정의합니다(적용 범위: 0 - 1)
CSS의 획 불투명도 속성은 획 색상의 투명도를 정의합니다(적용 범위: 0 - 1)
예 3
전체 요소의 불투명도 정의:
SVG 코드는 다음과 같습니다.
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
CSS 불투명도 속성은 요소의 투명도 값을 정의합니다(범위: 0~1).
예제 4
마지막 예, 둥근 직사각형을 만듭니다.
SVG 코드는 다음과 같습니다.
인스턴스
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera 사용자: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
rx 및 ry 속성을 사용하면 직사각형의 모서리가 둥글게 됩니다.
