SVG 선형 변화

SVG 연속 변환

연속 변환은 하나의 색상에서 다른 색상으로 부드러운 전환입니다. 또한, 동일한 요소에 여러 색상 전환을 적용할 수 있습니다.

SVG에서 주요 연속 변환 유형이 두 가지 있습니다：

  • 선형 연속 변환
  • 방사 연속 변환

SVG 선형 연속 변환 - <linearGradient>

<linearGradient> 선형 연속 변환을 정의하는 요소입니다.

<linearGradient> 요소는 <defs> 태그 내에.<defs> 요소는 정의(definitions)의 약자로, 특수 요소(예: 필터) 정의를 포함합니다.

선형 연속 변환은 수평, 수직 또는 각도 연속 변환으로 정의될 수 있습니다：

  • y1과 y2가 같고 x1과 x2가 다를 때 수평 연속 변환을 생성합니다
  • x1과 x2가 같고 y1과 y2가 다를 때 수직 연속 변환을 생성합니다
  • x1과 x2가 다르고 y1과 y2가 다를 때 각도 연속 변환을 생성합니다

예제 1

황금에서 빨간색으로的水平선형 연속 변환을 가진 원을 정의합니다：

이 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> 태그의 id 속성은 그레이더의 유일한 이름을 정의합니다
  • <linearGradient> 태그의 x1, x2, y1, y2 속성은 그레이더의 시작과 끝 위치를 정의합니다
  • 그레이더의 색상 범위는 두 가지 또는 그 이상의 색상으로 구성될 수 있습니다. 각 색상은 <stop> 태그로 지정됩니다
  • offset 속성은 그레이더 색상의 시작과 끝 위치를 정의합니다
  • fill 속성은 확대형 요소를 그레이더에 연결합니다

예제 2

확대형을 정의하고, 황금빛에서 빨간색으로 직立的 선형 그레이더를 추가합니다：

이 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,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

직접 시도해 보세요

예제 3

확대형을 정의하고, 그 안에 텍스트를 추가하여 황금빛에서 빨간색으로水平的 선형 그레이더를 추가합니다：

SVG

이 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> 요소는 텍스트 추가에 사용됨