SVG <경로>
SVG 경로 - <경로>
<path> 요소는 경로를 정의하는 데 사용됩니다.
경로 데이터에 대해 다음 명령을 사용할 수 있습니다.
- M = 이동
- L = 라인토
- H = 수평선까지
- V = 수직선~
- C = 곡선
- S = 부드러운 곡선
- Q = 2차 베지어 곡선
- T = 부드러운 2차 베지어 곡선
- A = 타원형 호
- Z = 근접 경로
참고: 위의 모든 명령은 소문자로도 표현할 수 있습니다. 대문자는 절대 위치를 의미하고 소문자는 상대적 위치를 의미합니다.
실시예 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차 베지어 곡선이라고 하고 두 개의 제어점이 있는 종류를 3차 곡선이라고 합니다.
다음 예는 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-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 편집기를 사용하여 복잡한 그래픽을 만드는 것이 좋습니다.