본문 바로가기

Webstoryboy

Category

Explanation

SVG

(5)
[SVG] <rect> 요소는 직사각형을 그리는 기본 SVG 모양입니다. 직사각형의 위치, 높이, 너비, 모서리 굴곡 등을 표현 할 수 있습니다. 요소는 직사각형을 그립니다. 정의(Definition) 요소는 직사각형을 그립니다. 속성(Property) 속성 설명 x 사각형의 X좌표 값을 설정합니다. y 사각형의 Y좌표 값을 설정합니다. width 사각형의 가로 값을 설정합니다. height 사각형의 세로 값을 설정합니다 rx 사각형의 보더 굴곡의 X값을 설정합니다. ry 사각형의 보더 굴곡의 Y값을 설정합니다. 1. 사각형 SVG를 이용한 사각형입니다. Sample1 CSS .svg {width: 160px; height: 160px; background: #ffebee;} .rect1 { fill: #f48fb1; widt..
[SVG] <polyline> 요소는 SVG 기본 모양으로 여러 점을 연결하는 직선을 그릴 때 사용합니다. 요소는 직선을 그립니다. 정의(Definition) 요소는 SVG 기본 모양으로 여러 점을 연결하는 직선을 그릴 때 사용합니다. 요소는 첫 번째 점과 끝 점이 연결될 필요가 없는 열린 모양을 만듭니다. 속성(Property) 속성 설명 points 다각형에 필요한 점(x축, y축)의 좌표값을 설정합니다. 1. 폴리라인 SVG를 이용한 폴리라인입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .polyline1 {fill: none; stroke-width: 2; stroke: #880e4f;} .polyline2 {fill:..
[SVG] <line> 요소는 SVG 기본 모양으로 두 점을 연결하는 선을 그릴 때 사용합니다. 요소는 선을 그립니다. 정의(Definition) 요소는 SVG 기본 모양으로 두 점을 연결하는 선을 그릴 때 사용합니다. 속성(Property) 속성 설명 x1 선의 시작점 x축 좌표 값을 설정합니다. x2 선의 끝점 x축 좌표 값을 설정합니다. y1 선의 시작점 y축 좌표 값을 설정합니다. y2 선의 끝점 y축 좌표 값을 설정합니다. pathLength 패스의 총 길이 값을 설정합니다. 1. 라인 SVG를 이용한 라인입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .line1 {fill: none; stroke-width:..
[SVG] <circle> 요소는 원을 그리는 SVG 기본 모양입니다. 중심점과 반지름을 기준으로 원을 표현합니다. 요소는 원을 그립니다. 정의(Definition) 요소는 SVG 기본 모양으로 중심점과 반지름을 기준으로 원을 그리는데 사용됩니다. 속성(Property) 속성 설명 cx 원 중심의 x축 좌표 값을 설정합니다. cy 원 중심의 y축 좌표 값을 설정합니다. r 원의 반지름 값을 설정합니다. 1. 사각형 SVG를 이용한 사각형입니다. Sample1 CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .circle1 { fill: #f48fb1; cx: 80; cy: 80; r: 60; } .circle2 { fill: #f48fb1; cx: 80; ..
[SVG] SVG SVG SVG(Scalable Vector Graphics)는 2차원 기반의 벡터 그래픽 마크업 언어입니다. SVG는 그래픽을 표현하기 위한 방식입니다. SVG는 텍스트 기반의 표준 방식이며, XML을 바탕으로 설정되어 있으며, 검색, 인덱싱, 스크립트 및 압축이 가능합니다. 또한 SVG는 에디터와 일러스트의 벡터 방식의 소프트웨어에서도 작성할 수 있습니다. SVG는 1999년 W3C(World Wide Web Consortium)에서 개발한 공개 표준입니다.
1