> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-patterns.md).

# SVG 패턴

### 도형 패턴

SVG 도형 패턴을 정의해 요소에 적용할 수 있습니다. 패턴을 적용하고자 하는 요소 `fill` 속성에 패턴 요소의 ID를 참조 연결합니다.

```markup
<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>
```

![2개의 직선 요소를 패턴으로 하는 SVG 사각형](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESkcHBsf0o3MSHQVGA%2Fimage.png?alt=media\&token=69bdbc9d-c087-48ea-b199-978853a14cb5)

### 패턴 재사용

도형 패턴을 `<defs>` 내에 정의하는 영역으로 옮긴 후, 식별 가능한 ID를 설정합니다. `<use>` 요소를 사용해 이를 재 사용할 수 있습니다.

```markup
<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>
```

![재 사용된 도형 패턴](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESnYO2K14mwyGm9TG8%2Fimage.png?alt=media\&token=b95866ff-a2c7-4ee4-9d83-4b667ac6e410)

### 텍스트 패턴

텍스트에 패턴을 매핑 하는 방법도 도형 패턴과 유사합니다. 패턴 ID 값을 텍스트 요소 `fill` 속성에 참조 연결합니다.

```markup
<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>
```

![패턴 매핑 된 SVG 텍스트](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESlrDy8QK0Au1FI5fm%2Fimage.png?alt=media\&token=b229e234-8525-4e04-9f78-cb6b142d137f)

### &#x20;텍스트 패턴 + 마스크

패턴이 매핑 된 텍스트에 마스크 처리 또한 가능합니다. 패턴은 `fill` 속성에, 마스크는 `mask` 속성에 참조 연결합니다.

```markup
<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>
```

![패턴, 마스킹이 동시 적용된 SVG 텍스트](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESmM45maaU3N1Nqfgw%2Fimage.png?alt=media\&token=14bb1f78-bdad-4ec2-98fb-d99bacbebfc8)