SVG Path
* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.
* 필자의 기준이 절대적인 진리는 아닙니다.
SVG Path - <path>
<path> 태그는 path를 정의할때 사용한다.
밑의 명령어들은 path 정보들을 구하는데 사용된다.
- M = moveto 기준점이동
- L = lineto 선으로이동
- H = horizontal lineto 가로선이동
- v = vertical lineto 세로선이동
- C = curveto 곡선이동
- S = smooth curveto 부드러운 곡선이동
- Q = quadratic Bezier curve 2차 베지어 곡선
- T = smooth quadratic Bezier curveto 부드러운 2차 베지어 곡선
- A = elliptical Arc 타원형의 호
- Z = closepath 패스닫기
Note : 모든 명령어들은 소문자와 함께 표현될 수 있다. 대문자의 의미는 절대적인 위치이며, 소문자의 의미는 상대적인 위치의 의미이다.
예제 1
이미지의 시작점이 150,0 으로 이동해서 75,200 까지 선을 그린 후 225,200 까지 선을 그리고 마지막으로 150,0 까지의 경로를 닫은 이미지이다.
SVG 코드
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
예제 2
베지어 곡선은 부드러운 곡선을 그리는데 사용된다. 보통 사용자들은 두개의 종료지점을 고르고 하나 또는 두개의 설정 포인트를 잡는다. 베지어 곡선은 하나의 설정 포인트를 2차 베지어 곡선에 사용하고 다른 종류의 두 설정 포인트를 정육면체라 부른다.(의역입니다... 해석능력이 후달리네요 ㅠㅠ)
아래의 예제는 2차 베지어곡석을 이용했다. A와 C는 각각 시작점과 종료지점이며 B는 설정 포인트이다.
SVG 코드
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
복잡한가? 당연하다!!!! 왜냐하면 SVG 에디터를 이용하여 복잡한 그래픽을 패스를 사용하여 그려내려면 높은 권한(실력인듯) 이 복잡성에 관여해있기 때문이다. [의역. 그냥 어렵다는 뜻]
출처 W3School.com - SVG - svg_path