SVG 그라데이션 - 선형

SVG 그라데이션

그라디언트 색상을 다른 색상으로 하나에서 원활하게 전환 할 수 있습니다. 또한, 상기 전환은 동일한 요소에 복수의 색을 적용 할 수있다.

SVG 그라데이션의 두 가지 유형이 있습니다 :

• 선형
• 레이디 얼

SVG 선형 그라디언트 - <이 LinearGradient>

<이 LinearGradient> 요소는 선형 그라데이션을 정의하는 데 사용됩니다.

<이 LinearGradient> 태그는 <응급 바이러스 정의> 내부에 중첩해야합니다. <응급 바이러스 정의> 태그는 그라데이션과 같이 정의 할 수있는 특수 요소와 약자의 정의입니다.

선형 그라데이션은 수평, 수직 또는 경사 각도로 정의 될 수있다 :

• Y1 및 Y2는 동일 아닌 X1 및 X2 모두가되면 수평 기울기를 만들
• X1 및 X2는 동일, Y1 및 Y2가 동일하지 않은 경우에는 수직 기울기를 생성 할
• X1 및 X2은 상이하고, Y1 및 Y2가 동일하지 않은 경우에는 경사 각도를 만들 수

예 1

그것은 노란색에서 빨간색 타원형에 수평 선형 그라데이션을 정의한다 :

다음은 SVG 코드는 다음과 같습니다

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

코드 분석 :

• id 속성 <이 LinearGradient> 태그는 그라데이션 정의에 대한 고유 한 이름이 될 수 있습니다
• <이 LinearGradient> 태그의 X1은 X2는 Y1은 Y2 속성 그레디언트의 시작과 끝을 정의
• 두 개 이상의 색상으로 그라데이션 색상 범위. 은 <정지> 태그에 의해 각 색상을 지정합니다. 그래디언트의 시작과 끝 위치를 정의하는데 사용되는 오프셋.
• 타원의 기울기에 링크 속성 요소를 작성

예 2

노란색에서 빨간색 타원형에 수직 선형 그라데이션을 정의합니다 :

다음은 SVG 코드는 다음과 같습니다

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

예 3

타원의 정의, 텍스트 내에서 빨간색 노란색에서 수평 선형 그라데이션 및 타원을 추가합니다 :

다음은 SVG 코드는 다음과 같습니다

오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).

코드 분석 :

• <텍스트> 요소는 텍스트를 추가하는 데 사용됩니다