기본 모양

Windows Internet Explorer 9은 SVG 1.1(버전 2) 사양의 기본 모양 모듈에 지정된 대로 모든 기본 모양 요소, 해당 특성 및 연결된 DOM 인터페이스의 구문 분석과 렌더링을 새롭게 지원했습니다. 기본 모양 집합은 다음과 같은 모양 요소로 구성됩니다.

이러한 개체에 연결된 DOM 인터페이스도 지원됩니다. 다음은 앞에서 언급한 각 모양 요소의 예제입니다. 태그 뒤에는 Internet Explorer 9에 나타나는 해당 결과의 스크린샷이 있습니다.

사각형: rect 요소


<?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">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />

 </svg>

SVG 사각형

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

모서리가 둥근 SVG 사각형

자세한 내용은 rect 요소 참조 페이지를 참조하세요.

원: circle 요소


<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

SVG 원

자세한 내용은 circle 요소 참조 페이지를 참조하세요.

타원: ellipse 요소


<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

SVG 타원

자세한 내용은 ellipse 요소 참조 페이지를 참조하세요.

선: line 요소


<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>

<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>

<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

SVG 선 3개

자세한 내용은 line 요소 참조 페이지를 참조하세요.

폴리라인: polyline 요소

"폴리라인"은 SVG에서 여러 개의 연결된 선으로 정의되며, 주로 "열린" 모양이나 모서리가 하나 이상 누락된 다각형 또는 볼록하지 않은 모양을 구성합니다.


<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

검은색 테두리 2개가 있는 SVG 폴리라인

자세한 내용은 polyline 요소 참조 페이지를 참조하세요.

다각형: polygon 요소

다각형은 닫힌 모양입니다.


<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

검은색 테두리 3개가 있는 SVG 다각형(삼각형)

자세한 내용은 polygon 요소 참조 페이지를 참조하세요.

샘플 및 자습서

웹 페이지에 SVG를 추가하는 방법

관련 항목

SVG

 

 

표시:
© 2014 Microsoft