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

http://www.w3schools.com/svg/svg_path.asp