경로

SVG 경로는 모양의 윤곽선입니다. 채우거나, 스트로크(경로를 따라 선을 그림)하거나, 클리핑 패스(다른 모양의 그림 조각)로 사용할 수 있습니다.Windows Internet Explorer 9은 SVG 1.1(버전 2) 사양의 경로(영문) 모듈에 지정된 대로 SVG 경로를 새롭게 지원했습니다. 여기에는 path 요소 및 경로 데이터를 구문 분석할 수 있게 해주는 d 속성 지원도 포함됩니다.

경로 모듈에 연결된 DOM 인터페이스도 지원됩니다.

path 요소를 통해 다양한 여러 개발자 시나리오를 구현할 수 있습니다. 다음은 몇 가지 간단한 예제입니다. 태그 뒤에는 Internet Explorer 9에 나타나는 해당 결과의 스크린샷이 있습니다.

직선과 채우기를 사용한 닫힌 모양


<?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 version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <path d="M 20 20 L 60 20 L 40 60 z"
    fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

 </svg>

빨간색 테두리가 있는 녹색 SVG 삼각형

베지어 패스(정방형)


<path d="M20,30 Q40,50 60,30 T100,30"
    fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

"S"자 모양의 분홍색 곡선

호를 사용한 선


<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />aa700834

녹색 안감이 있는 파란색 "모자"

관련 항목

SVG

 

 

표시:
© 2014 Microsoft