SVG 경로 - <경로>
<path> 요소의 경로를 정의하는 데 사용된다.
다음 명령은 경로 데이터를 사용할 수 있습니다 :
- M =있는 moveto
- L =에 lineTo
- H = 수평에 lineTo
- V = 수직에 lineTo
- C =에 curveTo
- S = 부드러운에 curveTo
- Q = 차 베 지어 곡선
- T는 부드러운 차 베 지어에 curveTo을 =
- A = 타원형 호
- Z = 히며 closePath
Note: 위의 모든 명령을 또한 낮은 문자로 표현 될 수있다. 대문자 절대적으로 낮은 경우가 상대적으로 위치 의미, 위치 의미합니다.
예 1
아래의 예는 선, 거기에서 마침내 150, 다시 경로를 폐쇄 225200에 다음 75,200의 위치를 선으로 위치 150,로 시작하는 경로를 정의합니다 :
다음은 SVG 코드는 다음과 같습니다
예 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 편집기를 사용하는 것이 좋습니다.