SVG 선형 변화

SVG 그레이딩은 <defs> 태그 내에서 정의되어야 합니다.

SVG 그레이딩

그레이딩은 하나의 색상에서 다른 색상으로의 평滑한 전환입니다. 또한, 여러 색상의 전환을 동일한 요소에 적용할 수 있습니다.

SVG에서는 두 가지 주요 그레이딩 유형이 있습니다:

  • 선형 그레이딩
  • 방사성 그레이딩

선형 그레이딩

<linearGradient>는 SVG의 선형 그레이딩을 정의할 수 있습니다.

<linearGradient> 태그는 <defs> 내부에 포함되어야 합니다. <defs> 태그는 definitions의 약자로, 그레이딩과 같은 특수 요소를 정의할 수 있습니다.

선형 그레이딩은 수평, 수직 또는 모서리 그레이딩으로 정의될 수 있습니다:

  • y1과 y2가 같고, x1과 x2가 다를 때, 수평 그레이딩을 생성할 수 있습니다
  • x1과 x2가 같고, y1과 y2가 다를 때, 수직 그레이딩을 생성할 수 있습니다
  • x1과 x2가 다르고, y1과 y2가 다를 때, 모서리 그레이딩을 생성할 수 있습니다

아래 코드를 메모장에 복사하고, 파일을 "linear1.svg"로 저장하세요. 이 파일을 웹 디렉토리에 넣으세요:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

코드 설명:

  • <linearGradient> 태그의 id 속성은 그레이딩에 독특한 이름을 정의할 수 있습니다
  • fill:url(#orange_red) 속성은 ellipse 요소를 이 그레이딩에 연결합니다
  • <linearGradient> 태그의 x1, x2, y1, y2 속성은 그레이딩의 시작과 끝 위치를 정의할 수 있습니다
  • 그레이딩의 색상 범위는 두 가지 또는 여러 가지 색상으로 구성될 수 있습니다. 각 색상은 <stop> 태그를 통해 정의됩니다. offset 속성은 그레이딩의 시작과 끝 위치를 정의합니다.

예제 보기 (수평 그레이딩)

또는 예제:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

예제 보기 (직립 변화)