Latest web development tutorials

SVG 그라데이션 - 방사성

SVG 방사성 점진적 - <RadialGradient는>

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

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


예 1

흰색에서 파란색 타원형에 방사형 그라디언트를 정의합니다 :

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

<SVG의의 xmlns = "http://www.w3.org/2000/svg"버전 = "1.1">
<응급 바이러스 정의>
<RadialGradient는 한 id = "grad1"CX = "50 %"CY = "50 %"R = "50 %"FX = "50 %"FY = "50 %">
<중지 = "0 %"스타일 = 오프셋 "중지 색 : RGB (255, 255, 255)를;
중지 - 불투명도 : 0 "/>
<중지 = "100 %"스타일 오프셋 "중지 색 : RGB (0,0,255를) 중지 - 불투명도 : 1"/>
</ RadialGradient는>
</ 인증 된 정의>
<타원은 CX = "200"CY = "70"RX = "85"공예 = "55"= 작성 "URL (#을 grad1)"/>
</ SVG>

»시도

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

코드 분석 :

  • id 속성 <RadialGradient는> 태그는 그라데이션 정의에 대한 고유 한 이름이 될 수 있습니다
  • CX는 CY, 그리고 R 속성 최 원을 정의 FX와 FY 가장 안쪽 원을 정의 할
  • 그라디언트 색상 범위는 두 가지 이상의 색으로 구성 될 수있다. 각 색상은 <정지> 태그를 사용하여 지정됩니다. 그래디언트의 시작과 끝을 정의하는데 사용되는 오프셋
  • 타원의 기울기에 링크 속성 요소를 작성

예 2

파란색 타원형 흰색에서 방사형 그래디언트를 정의 또 다른 :

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

<SVG의의 xmlns = "http://www.w3.org/2000/svg"버전 = "1.1">
<응급 바이러스 정의>
<RadialGradient는 한 id = "grad1"CX = "20 %"CY = "30 %"R = "30 %"FX = "50 %"FY = "50 %">
<중지 = "0 %"스타일 = 오프셋 "중지 색 : RGB (255, 255, 255)를;
중지 - 불투명도 : 0 "/>
<중지 = "100 %"스타일 오프셋 "중지 색 : RGB (0,0,255를) 중지 - 불투명도 : 1"/>
</ RadialGradient는>
</ 인증 된 정의>
<타원은 CX = "200"CY = "70"RX = "85"공예 = "55"= 작성 "URL (#을 grad1)"/>
</ SVG>

»시도

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