SVG 그라데이션 - 방사성
SVG 방사형 그라데이션 - <radialGradient>
<radialGradient> 요소는 방사형 그라데이션을 정의하는 데 사용됩니다.
<radialGradient> 태그는 <defs> 내에 중첩되어야 합니다. <defs> 태그는 정의(definition)의 약어로, 그라데이션과 같은 특수 요소를 정의할 수 있습니다.
예 1
흰색에서 파란색 타원으로의 방사형 그라데이션 정의:
SVG 코드는 다음과 같습니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera 사용자의 경우: 보기 SVG 파일(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭)
코드 분석:
<radialGradient>태그의 id 속성은 그라데이션의 고유한 이름을 정의할 수 있습니다
CX, CY, r 속성으로 정의된 가장 바깥쪽 원과 Fx, Fy로 정의된 가장 안쪽 원
그라디언트 색상 범위는 둘 이상으로 구성될 수 있습니다. 색상 구성. 각 색상은 <stop> 태그로 지정됩니다. 오프셋 속성은 그라데이션의 시작과 끝을 정의하는 데 사용됩니다
채우기 속성은 타원 요소를 이 그라데이션에 연결합니다
예 2
흰색에서 파란색으로의 방사형 그라데이션을 정의하는 또 다른 타원:
SVG 코드는 다음과 같습니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Opera 사용자의 경우: SVG 파일 보기(오른쪽 클릭) SVG 그래픽 미리보기 소스에서).
