svg 를 css 안에서 바로 사용하기. (mask-image 속성)

귀찮게 svg 요소 만들어서 집어넣을 필요없이 css 에서 사용할수있는 방법이 있다.

 

먼저 https://yoksel.github.io/url-encoder/

가서 svg 를 url 로 변환한뒤에

 

.div {

    background-color: red; /* svg fill 색 */

    -webkit-mask-image: url('svg를url로변경한string');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-image: url('svg를url로변경한string');
    mask-repeat: no-repeat;
    mask-position: center center;

}

이렇게 하면 center 에 align 할수있으며,

mask 기능을 이용해 background 를 잘라서 background color 색이 svg 에 입혀진다.

transform : scale() 속성을 추가하여 크기를 조금씩 조정하도록 하자.

 

pseudo element 안에 사용할 경우 반드시

content: '';
width: 100%;
height: 100%;

위의 속성이 추가되어야함.