SVG <path>

<path> 태그는 경로를 정의합니다.

<path> 태그

<path> 태그는 경로를 정의합니다.

경로 데이터에 사용할 수 있는 명령어는 다음과 같습니다：

  • M = 이동하기
  • L = 라인 투
  • H = 수평 라인 투
  • V = 수직 라인 투
  • C = 커브토
  • S = 평滑 커브토
  • Q = 퀵비제르 커브
  • T = 평滑 퀵비제르 커브토
  • A = 엘리피스 아키텍트
  • Z = closepath

주석：위의 모든 명령어는 소문자를 허용합니다. 대문자는 절대 위치를, 소문자는 상대 위치를 나타냅니다.

아래의 코드를 메모장에 복사한 후 파일을 "path1.svg"로 저장하세요. 이 파일을 웹 디렉토리에 넣으세요：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

위의 예제는 시작 위치 250 150에서 150 350 위치까지 이동한 후, 그곳에서 350 350 위치로 이동하고 마지막으로 250 150 위치에서 경로를 닫습니다.

예제 보기

다음 예제는 나선형을 생성합니다：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>

예제 보기

매우 복잡해 보이시죠? 예！！！경로 그리기의 복잡성 때문에, 복잡한 그래픽을 생성하기 위해 SVG 편집기를 사용하는 것을 강력히 권장합니다.