Skip to main content

patterns

패턴은 일종의 채우기 형태로 그래디언트와 마찬가지로 <defs> 섹션에 넣어야 한다. 패턴은 <parttern> 요소 안에 다른 도형들을 포함 할 수 있고 거기에 그래디언트등 스타일도 적용할 수 있다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

핵심은 단위와 크기이다.

단위는 patternUnits 속성과 patternContentUnits 속성에 대해 아래 두 값을 지정할 수 있다.

  • objectBoundingBox
  • userSpaceOnUse

크기는 패턴이 얼마나 반복될 것인가를 지정하기 위해 width, height 속성을 사용한다.

patternUnits 속성#

패턴의 좌표계 단위를 결정한다.

objectBoudingBox가 기본값으로 지정되며 이 값은 패턴을 적용할 객체를 1로 보고 좌표를 지정한다. 즉 0.25의 경우 4번의 반복을 예상할 수 있다. userSpaceOnUse는 픽셀로 지정한다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

patternContentUnits 속성#

패턴 내부요소의 컨텐츠에 사용할 좌표계를 결정한다.

userSpaceOnUse가 기본값으로 패턴내부의 모든 좌표가 패턴타일이 생성될때 정의된 사용자 좌표계를 참조한다. objectBoudingBox는 패턴내부의 모든 좌표가 경계상자에 상대적이다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^