SVG 패턴

Last updated 6 years ago

SVG 패턴

도형 패턴

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>

패턴 재사용

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

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

PreviousSVG 그레디언트 NextSVG 필터

Last updated 6 years ago