SVG 도형 패턴을 정의해 요소에 적용할 수 있습니다. 패턴을 적용하고자 하는 요소 fill 속성에 패턴 요소의 ID를 참조 연결합니다.
<svg>
<defs>
<pattern id="pattern">
<line x1="0" y1="0" x2="30" y2="30" class="ptrn1" />
<line x1="0" y1="30" x2="30" y2="0" class="ptrn2" />
</pattern>
</defs>
<rect fill="url(#pattern)"
x="150" y="150" width="300" height="300" />
</svg>
<svg>
<defs>
<pattern id="cross-pattern">...</pattern>
<rect id="ptrn" fill="url(#cross-pattern)" />
</defs>
<use xlink:href="#ptrn" x="10" y="10" />
<use xlink:href="#ptrn" x="120" y="120" />
</svg>
텍스트에 패턴을 매핑 하는 방법도 도형 패턴과 유사합니다. 패턴 ID 값을 텍스트 요소 fill 속성에 참조 연결합니다.
<svg>
<defs>
<pattern id="pattern">
<line x1="0" y1="0" x2="30" y2="30" class="ptrn1" />
<line x1="0" y1="30" x2="30" y2="0" class="ptrn2" />
</pattern>
</defs>
<text fill="url(#text-pattern)">SVG</text>
</svg>
패턴이 매핑 된 텍스트에 마스크 처리 또한 가능합니다. 패턴은 fill 속성에, 마스크는 mask 속성에 참조 연결합니다.
<svg>
<defs>
<pattern id="text-pattern"> ... </pattern>
<mask id="text-mask"></mask>
</defs>
<text
fill="url(#text-pattern)"
mask="url(#text-mask)">
SVG
</text>
</svg>
