SVG: 패턴(Pattern)

>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=396&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=1

 

 

패턴이란 일정한 문양이 반복되는 것을 말합니다. SVG에서의 패턴은 사전에 정의된 그래픽 개체(패턴 요소)를 동일하게 반복되도록 하여 나타냅니다.

<예제 pattern01>

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="8cm" height="4cm" viewBox="0 0 800 400"   xmlns="http://www.w3.org/2000/svg">   <defs>     <pattern id="TrianglePattern" patternUnits="userSpaceOnUse"                x="0" y="0" width="100" height="100"                viewBox="0 0 10 10" >     <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />     </pattern>   </defs>   <!-- Outline the drawing area in blue -->   <rect fill="none" stroke="blue"           x="1" y="1" width="798" height="398"/>   <!-- The ellipse is filled using a triangle pattern paint server     and stroked with black -->   <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"               cx="400" cy="200" rx="350" ry="150" /> </svg>

SVG 보기 (pattern01.svg)

<pattern> 요소는 직접 그려지지 못하고 반드시 fill이나 stroke를 사용하여 그려지며, <pattern> 요소에는 display 속성이 적용되지 않습니다.

※위 예제는 W3C 웹 사이트의 SVG 스펙 문서에 사용된 예제입니다.