[에스비지] SVG -(12편)- 패턴만들기 (1/2) (feat. pattern, viewBox, width, height, defs)

패턴 만들기

Pattern

 

 

오늘 알아야 할 핵심 키워드는 바로바로!!

 

defs

pattern

width

height

viewBox

 

 

우리가 보통 배경으로 사용하는 그림이나 사진파일 등을

패턴을 넣어서

벽지처럼 깔 수가 있다.

 

지난시간과는 달리 svg를 인라인으로 바로 적어주며

만들어보도록 하자.

 

 

 

1. 우선 svg의 영역이 필요하다.

 

width: 500px;

height: 500px;

background-color: #eee;

 

 

 

 

2. pattern을 정의할 때는  참조를 위한 영역인 defs 안에서 해준다.

 

 

3. pattern이라는 태그를 이용한다.

그안에 패턴에 사용될 모양들을 그려주면 된다.

 

 

4. pattern에 id가 필요하다.

예) <pattern id="bg-pattern"></pattern>

 

5. pattern의 위치값을 좌표로 적는다.

예) <pattern id="bg-pattern" x="0" y="0"></pattern>

 

 

6. 그리고 너비와 높이를 정하자.

예) <pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1"></pattern>

 

0.1의 값은, 1을 100%로 보면, 0.1이 1/10을 뜻하게 된다.

즉,

1/10의 크기로, 10개씩 넣겠다는 뜻이다.

 

 

7. 원을 하나 그려보자.

<svg class="svg">
    <defs>
      <style>
        <![CDATA[
        .svg {
          width: 500px;
          height: 500px;
          background-color: #eee;
        }
        ]]>
      </style>
      <pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1">
        <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
      </pattern>
    </defs>
  </svg>

 

당장은 눈에 보이지 않는다.

 

왜냐하면,

defs 안에 있기에 참조할 수 있는 형태로만 있기 때문이다.

 

 

그럼 이 참조한 것을 연결 시켜줘야 한다.

 

 

그럼 그걸 참조할 수 있게, 연결 할 수 있게,

 

8. svg에 가득찬 사각형을 하나 그려보겠다.

 

 

당연히 defs 밖에 그려야겠지?

 

<svg class="svg">
    <defs>
      <style>
        <![CDATA[
        .svg {
          width: 500px;
          height: 500px;
          background-color: #eee;
        }
        .bg-for-pattern {
          width: 100%;
          height: 100%;
          fill: url('#bg-pattern')
        }
        ]]>
      </style>
      <pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1">
        <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
      </pattern>
    </defs>

    <rect class="bg-for-pattern" x="0" y="0"></rect>
  </svg>

 

rect 태그의 x값 y값을 먼저 잡아 주고,

 

 

class명을 나는

 

bg-for-pattern

 

이라고 했다.

 

거기에 width값

height값을 각각 100%를 줘서

svg내의 전체크기로 만들었고,

fill값을 pattern을 연결해 채웠다.

 

 

 

 

우리는 분명 원을 그렸는데 원의 1/4 만 보이고,

전체너비의 1/10만큼이 10개씩 채워진것을 볼 수 있다.

 

 

자 rect의 전체 크기는 500*500이다.

circle의 크기는 반지름이 50이므로 100*100 크기이다.

100*100의 크기가 500*500 안에 10개가 들어 갈 수 없다.

그러므로, 그 크기의 반정도가 패턴으로 들어간 것이다.

 

그럼 원을 넣고 싶다면?

 

 

 

첫번째 방법,
circle의 원의 중심을 새로잡고 반지름 크기를 줄여보자.

예) <circle cx="25" cy="25" r="25" fill="hotpink"></circle>

 

 

두번째 방법,
pattern의 width와 height를
0.1이 아닌 0.2로 바꿔 한줄에 5개의 원으로 바꾸자.

<svg class="svg">
    <defs>
      <style>
        <![CDATA[
        .svg {
          width: 500px;
          height: 500px;
          background-color: #eee;
        }
        .bg-for-pattern {
          width: 100%;
          height: 100%;
          fill: url('#bg-pattern')
        }
        ]]>
      </style>
      <pattern id="bg-pattern" x="0" y="0" width="0.2" height="0.2">
        <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
      </pattern>
    </defs>

    <rect class="bg-for-pattern" x="0" y="0"></rect>
  </svg>

 

 

 

세번째 방법,
pattern태그의 viewBox를 이용해 상대적크기를 바꿔준다.

<pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</pattern>

이걸 풀이해 보면,

 

pattern 의 width와 height가 각각 0.1 이었는데,

viewBox가 이들을 100으로 인식하라고 한것이다.

그럼 크기가 100*100이 10개니까 1000*1000으로 인식을 하라는 의미다.

그럼 circle은 너비가 100*100 이므로

딱 맞게 10개의 원이 들어간다.

 

 

 

아 이뻐라.

 

 

네번째 방법,
svg태그의 viewBox를 이용해 상대적크기를 바꿔준다.

 

세번째에 pattern에 줬으면,

이번에는 SVG태그에 viewBox를 이용하여 해보자.

 

svg의 영역을 가득 채우자.

position: absolute;

와 함께

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #eee;

 

이렇게 바꿔주면,

 

 

이런식으로 간격이 생긴다.

 

이 전과 같이 딱 붙어있는 원을 만들고 싶다면,

그리고 창의 크기에 따라 조정하고 싶다면,

(원의 갯수는 10개로 정해질 수밖에 없다.)

 

svg에 viewBox를 적어보자.

svg크기가 500*500 이고, 패턴에 viewBox가 적혔던것과 달리

svg가 화면 가득 채워져 크기가 커졌을 때, svg태그에 viewBox를 달게 되면,

 

circle의 크기가 100*100 이기에 

이의 10배인,

1000*1000이 되어야 한다.

 

<svg class="svg" viewBox="0 0 1000 1000">
    <defs>
      <style>
        <![CDATA[
        .svg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #eee;
        }
        .bg-for-pattern {
          width: 100%;
          height: 100%;
          fill: url('#bg-pattern')
        }
        ]]>
      </style>
      <pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1">
        <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
      </pattern>
    </defs>

    <rect class="bg-for-pattern" x="0" y="0"></rect>
  </svg>

 

그러면 창크기에 따라서 원의 크기도 상대적으로 변한다.

 

만약의 circle의 크기를 조정하게되면,

또 모양이 변하니, viewBox의 크기도 조정해 주어야 할것이다.

만약 우리가 하고자하는게 딱붙어있는 원들의 저런모양이라면 말이다.

 

 

 

2편에 계속...