SVG <path>
SVG 경로 - <path>
<path> 경로를 정의하는 요소입니다.
경로 데이터에 사용할 수 있는 명령어는 다음과 같습니다:
- M = moveto(이동)
- L = lineto(선으로)
- H = horizontal lineto(왼쪽으로 가는 선)
- V = vertical lineto(위로 가는 선)
- C = curveto(곡선으로)
- S = smooth curveto(원활한 곡선으로)
- Q = quadratic Bézier curve(두차원 베제르 곡선)
- T = smooth quadratic Bézier curveto(원활한 두차원 베제르 곡선)
- A = elliptical Arc(椭圆形 궤도)
- Z = closepath(경로 닫기)
주의: 위의 모든 명령은 소문자로도 표현할 수 있습니다. 대문자는 절대 위치를, 소문자는 상대 위치를 나타냅니다.
예제 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
베제르 곡선(Bézier curves)는 무한으로 축소할 수 있는 원활한 곡선 모델링에 사용됩니다. 일반적으로 사용자는 두 개의 끝점과 하나 또는 두 개의 제어점을 선택합니다. 하나의 제어점을 가진 베제르 곡선은 두차원 베제르 곡선(quadratic Bézier curve)이라고 불리며, 두 개의 제어점을 가진 베제르 곡선은 삼차원 베제르 곡선(cubic)이라고 합니다.
다음은 두 번째 베塞尔 곡선을 생성하는 예입니다. 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" />
<!-- 标记相关的点 -->
<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>
<!-- 给点添加标签 -->
<g font-size="30" font-family="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 편집기를 사용하는 것이 강력히 권장됩니다.
