Gradient

Gradient

 

그래디언트(gradient)는 하나의 색상에서 다른 것으로 부드러운 전환을 의미한다.

• <linearGradient>
  - 선형 그러데이션을 정의하는 데 사용
  - <defs> 태그 내에 중첩되어야 한다.
  - 수평 gradients 는 y1과 y2는 동일하며, x1과 x2는 차이가 있을 때 생성
  - 수직 gradients 는 x1과 x2는 동일하며, y1과 y2는 차이가 있을 때 생성
  - 경사(angular) gradients 는 x1과 x2는 차이가 있으며, y1과 y2 도 차이가 있을 때 생성
  - <linearGradient> 태그의  id 속성은 그라데이션의 고유한 이름을 정의
  - <linearGradient> 태그의 x1, x2, y1,y2 속성은 그러데이션의 시작 및 끝 위치를 정의
  - 그라데이션 색상 범위가 둘 이상의 색으로 구성될 수 있으며 각 색상은 <stop> 태그로 지정
  - offset 속성은 그라데이션 색상은 시작과 끝 위치를 정의하는 데 사용
  - fill 속성은 해당 요소를 gradient에 링크

<svg width="300" height="200">
    <defs>
        <linearGradient id="gradi_01" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" style="stop-color:rgb(69, 210, 245)"></stop>
            <stop offset="30%" style="stop-color:rgb(135, 204, 56)"></stop>
            <stop offset="100%" style="stop-color:rgb(62, 44, 223)"></stop>
        </linearGradient>
    </defs>
    <rect fill="url(#gradi_01)" x="30" y="30" width="200" height="150"></rect>
</svg>

• <radialGradient>
  - 방사형 그라데이션을 정의하는 데 사용
  - <defs> 태그 내에 중첩되어야 한다.
  - <radialGradient> 태그의 id 속성은 그러데이션의 고유 한 이름을 정의
  - cx, cy 와 r 속성은  가장 바깥쪽 원을 정의하고, fx과 fy 가장 안쪽 원을 정의
  - 그라데이션 색상 범위가 둘 이상의 색으로 구성될 수 있으며 각 색상은 태그로 지정
  - offset 속성은 그라데이션 색상은 시작과 끝 위치를 정의하는 데 사용
  - fill 속성은 해당 요소를 gradient에 링크

<svg width="300" height="200">
    <defs>
        <radialGradient id="gradi_02" cx="80%" cy="80%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(240, 115, 209)"></stop>
            <stop offset="100%" style="stop-color:rgb(245, 182, 163)"></stop>
        </radialGradient>
    </defs>
    <rect fill="url(#gradi_02)" x="10" y="10" width="150" height="150"></rect>
</svg>

• gradient을 활용한 mask 이미지

<svg width="300" height="300">
    <defs>
        <radialGradient id="gradi_0302" cx="30%" cy="50%" r="70%">
            <stop offset="0%" style="stop-color:#fff"></stop>
            <stop offset="100%" style="stop-color:#000"></stop>
        </radialGradient>
        <mask id="mask_06">
            <polygon fill="url(#gradi_0302)" points="146,21 239,58 203,149 106,147 65,65 146,21"></polygon>
        </mask>
    </defs>
    <image mask="url(#mask_06)" xlink:href="images_f/fruits01.jpg" x="0" y="0" width="500"></image>
</svg>