본문 바로가기

Webstoryboy

Category

Explanation

GRAPHIC/SVG

[SVG] <linearGradient>

<linearGradient>

<linearGradient> 요소는 그라디언트를 정의합니다.


<linearGradient>

<linearGradient> 요소는 그라디언트를 정의합니다.

정의(Definition)

  • <linearGradient> 요소는 그라디언트를 정의합니다.

1. 그라디언트

SVG를 이용한 그라디언트입니다.

Sample1
HTML
<div class="svgBox">
    <svg class="svg">
        <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color: #f6d365" />
            <stop offset="1" style="stop-color: #fda085" />
        </linearGradient>
        <polygon fill="url(#linearGradient1)" points="130,128 65,148 15,102 30,36 95,16 145,62"></polygon>
    </svg>
    <svg class="svg">
        <linearGradient id="linearGradient2" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color: #f6d365" />
            <stop offset="1" style="stop-color: #fda085" />
        </linearGradient>
        <polygon fill="url(#linearGradient2)" points="120,142 9,93 107,22"></polygon>
    </svg>
</div>
CSS
.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
    .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color: #f6d365" />
                <stop offset="1" style="stop-color: #fda085" />
            </linearGradient>
            <polygon fill="url(#linearGradient1)" points="130,128 65,148 15,102 30,36 95,16 145,62"></polygon>
        </svg>
        <svg class="svg">
            <linearGradient id="linearGradient2" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color: #f6d365" />
                <stop offset="1" style="stop-color: #fda085" />
            </linearGradient>
            <polygon fill="url(#linearGradient2)" points="120,142 9,93 107,22"></polygon>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<linearGradient> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN SVG
  • Scalable Vector Graphics (SVG)2

AD

comments