>> 원문: 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 스펙 문서에 사용된 예제입니다.
