SVG Linear Gradients

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Gradients

그라디언트란 하나의 색상에서 또 다른 하나의 색상으로 자연스럽게 변화가 가능한 기능이다. 게다가 몇몇의 색상의 변화는 같은 요소에 적용이 가능하다.

SVG의 그라디언트 타입은 두 가지가 있다.

• Linear
• Radial

SVG Linear Gradient - <linearGradient>

<linearGradient> 태그는 linear gradient 를 정의할때 사용한다.

<linearGradient> 태그는 반드시 <defs>태그와 중첩되어야한다. <defs>태그는 그라디언트와같은 특별한 속성을 정의하거나 정의를 생략할때 사용한다.

Linear 그라디언트는 세로 혹은 가로로 적용이 가능 하다.

• 가로 그라디언트는 y1 과 y2 가 동일하고 x1 과 x2가 다르다.
• 세로 그라디언트는 x1과 x2 가 동일하고 y1 과 y2가 다르다.
• 기울어진 그라디언트는 네 점 모두 다르다.

예제 1

원에 가로 linear 그라디언트를 적용한다. 색상은 노란색에서 빨간색으로 바뀐다.

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

코드 설명

• <linearGradient> 태그 내의 x1 , x2 , y1 , y2 속성은 그라디언트의 시작점과 끝점을 정의한다.
• 그라디언트의 색상 유효갯수는 두가지 이상이다. 각 색상은 <stop> 태그로 정의된다. offset속성은 그라디언트 색상의 시작과 끝을 정의한다.
• <ellipse>태그 내의 fill 속성은 그라디언트의 id와 연결한다.

예제 2

원에 세로 linear 그라디언트를 적용한다. 색상은 노란색에서 빨간색으로 바뀐다.

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

예제 3

예제 1번에 원형안에 텍스트를 추가해보자.

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

코드 설명

• <text>태그는 텍스트를 추가 할 수 있다.

출처 W3School.com - SVG - SVG Linear

http://www.w3schools.com/svg/svg_grad_linear.asp