SVG 경로
SVG 경로 - <경로>
<경로> 요소는 경로를 정의하는 데 사용됩니다.
다음 명령은 데이터를 라우팅하는 데 사용할 수 있습니다 :
- M =있는 moveto
- L =에 lineTo
- H = 수평에 lineTo
- V = 수직에 lineTo
- C =에 curveTo
- S = 부드러운에 curveTo
- Q = 차 베 지어 곡선
- T는 부드러운 차 베 지어에 curveTo을 =
- A = 타원형 호
- Z = 히며 closePath
참고 : 위의 모든 명령은 소문자를 할 수 있습니다. 자본이 절대 위치를 나타내고, 상대 위치는 소문자를 나타냅니다.
예 1
위의 예는 위치 1500에서 시작하는 경로를 정의, 위치 75,200에 도달 한 다음 거기에서 1500 200 225 마지막으로 닫힌 패스.
다음은 SVG 코드는 다음과 같습니다
예
<SVG의의 xmlns = "http://www.w3.org/2000/svg"버전 = "1.1">
<경로 D = "M150 0 L75 200 L225 200 Z"/>
</ SVG>
<경로 D = "M150 0 L75 200 L225 200 Z"/>
</ SVG>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
예 2
무한정 확장 할 수 있습니다 사용하여 베 지어 곡선 부드러운 곡선 모델입니다. 정상적인 상황에서, 사용자는 하나 또는 두 개의 엔드 포인트 개의 제어점을 선택한다. 이차 베 지어 곡선이라고 베 지어 곡선과 두 개의 제어 포인트의 제어 포인트는 큐브 불린다.
다음 예는 시작과 끝 지점입니다 A와 C 이차 베 지어 곡선을 작성, B는 제어 포인트는 다음과 같습니다
다음은 SVG 코드는 다음과 같습니다
예
<SVG의의 xmlns = "http://www.w3.org/2000/svg"버전 = "1.1">
<경로 ID = "lineAB"D = "M 100 3백50리터 150 -300"스트로크 = "빨간색"
스트로크 폭 = "3"을 작성 = "없음"/>
<경로 ID = "lineBC"D = "M 250 50리터 150 300"스트로크 = "빨간색"
스트로크 폭 = "3"을 작성 = "없음"/>
<경로 D = "M 175 200리터 150 0"스트로크 = "녹색"스트로크 너비 = "3"
작성 = "없음"/>
<경로 D = "M 100 (350) Q 150 -300 300 0"스트로크 = "파란색"
스트로크 폭 = "5"입력 = "없음"/>
<! - 마크 관련 포인트 ->
<G 스트로크 = "블랙"스트로크 폭은 = "3"= "블랙"을 작성>
<원 ID = "pointA"CX = "100"CY = "350"R = "3"/>
<원 ID = "pointB"CX = "250"CY = "50"R = "3"/>
<원 ID = "pointC"CX = "400"CY = "350"R = "3"/>
</ G>
<! - 포인트 레이블 ->
<G 글꼴 크기 = "30"글꼴 = "산세 리프는"= "블랙"스트로크 = "없음"을 입력
텍스트 앵커 = "중간">
<텍스트 X = "100"Y = "350"DX = "- 30">를 </ 텍스트>
<텍스트 X = "250"Y = "50"의 DY = "- 10"> B </ 텍스트>
<텍스트 X = "400"Y = "350"DX = "30"> C </ 텍스트>
</ G>
</ SVG>
<경로 ID = "lineAB"D = "M 100 3백50리터 150 -300"스트로크 = "빨간색"
스트로크 폭 = "3"을 작성 = "없음"/>
<경로 ID = "lineBC"D = "M 250 50리터 150 300"스트로크 = "빨간색"
스트로크 폭 = "3"을 작성 = "없음"/>
<경로 D = "M 175 200리터 150 0"스트로크 = "녹색"스트로크 너비 = "3"
작성 = "없음"/>
<경로 D = "M 100 (350) Q 150 -300 300 0"스트로크 = "파란색"
스트로크 폭 = "5"입력 = "없음"/>
<! - 마크 관련 포인트 ->
<G 스트로크 = "블랙"스트로크 폭은 = "3"= "블랙"을 작성>
<원 ID = "pointA"CX = "100"CY = "350"R = "3"/>
<원 ID = "pointB"CX = "250"CY = "50"R = "3"/>
<원 ID = "pointC"CX = "400"CY = "350"R = "3"/>
</ G>
<! - 포인트 레이블 ->
<G 글꼴 크기 = "30"글꼴 = "산세 리프는"= "블랙"스트로크 = "없음"을 입력
텍스트 앵커 = "중간">
<텍스트 X = "100"Y = "350"DX = "- 30">를 </ 텍스트>
<텍스트 X = "250"Y = "50"의 DY = "- 10"> B </ 텍스트>
<텍스트 X = "400"Y = "350"DX = "30"> C </ 텍스트>
</ G>
</ SVG>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
복잡? 예! ! 경로의 복잡성을 그릴 때 때문에, 강하게 복잡한 그래픽을 만들 SVG 편집기를 사용하는 것이 좋습니다.