SVG 효과

2021-12-03

SVG

svg에 그라디언트, 패턴, 마스크 효과를 줄 수 있다.

그라디언트

linearGradient 혹은 radialGradient 태그로 그라디언트를 적용할 수 있다.
stop 태그 안의 offset에 위치를 설정한다.
stop 태그 안의 stop-color에 컬러값을 넣는다.
fill로 그라디언트 아이디를 넣어 출력할 수 있다.

선형 그라디언트

<defs>
    <linearGradient id="linear-gradient">
        <stop offset="0%" stop-color="yellow" />
        <stop offset="50%" stop-color="hotpink" />
        <stop offset="100%" stop-color="deepskyblue" />
    </linearGradient>

    <style>
        .path {
            fill: url('#linear-gradient');
        }
    </style>
</defs>

원형 그라디언트

<defs>
    <radialGradient id="radial-gradient">
        <stop offset="0%" stop-color="yellow" />
        <stop offset="50%" stop-color="hotpink" />
        <stop offset="100%" stop-color="deepskyblue" />
    </radialGradient>

    <style>
        .path {
            fill: url('#radial-gradient');
        }
    </style>
</defs>

패턴

x, y: 패턴 위치
width, height: 패턴의 크기. 0.1은 1/10을 뜻한다.
fill로 패턴 아이디를 넣어 출력할 수 있다.
반응형으로 채우고 싶을 경우 viewBox를 사용한다.
svg를 CSS 애니메이션으로 만들 수 있다.

<svg viewBox="0 0 500 500">
    <defs>
        <pattern id="pattern" x="0" y="0" width="0.1" height="0.1">
            <circle cx="25" cy="25" class="pattern-circle"></circle>
        </pattern>
        <style>
            svg {
                width: 100%;
                height: 100%;
                background: #ddd;
            }

            .pattern-circle {
                fill: #fff000;
            }
        </style>
    </defs>
    <rect class="bg-rect" x="0" y="0" width="100%" height="100%"
    fill="url(#pattern)"></rect>
</svg>

애니메이션이 적용된 패턴

body {
    background: url(bunny.svg);
    background-size: 100px;
}

<defs>
    <style>
        @keyframes ani {
            from { transform: scaleY(1);}
            to { transform: scaleY(0.2);}
        }
        .animation {
            animation: ani 0.5s alternate infinite;
        }
    </style>
</defs>

Mask

defs 안에 mask를 생성하여 마스크 씌우길 원하는 모양을 생성한다.
색상은 하얀색(fill="#ffffff")이어야 한다.
검은색에 수렴할수록 투명해지며 흰색으로 수렴할수록 선명하게 보인다.
g mask="url(#해당 마스크 아이디 이름)"로 입힐 수 있다.

<svg class="svg">
    <defs>
        <mask id="mask-circle">
            <circle cx="50" cy="50" r="40" fill="white">
        </mask>
    </defs>
    <g mask="url(#mask-circle)">
        <text x="10" y="10"> Hello SVG!</text>
    </g>
</svg>

REFERENCE
인프런 SVG 마스터
https://www.inflearn.com/course/mastering-svg