SVG 방사형 그라데이션 - <radialGradient>
<radialGradient> 요소는 방사형 그라디언트를 정의하는 데 사용됩니다.
<radialGradient> 요소는 중첩되어야합니다 <defs> 태그입니다. <defs> 태그는 정의에 대한 짧고 특별한 요소의 정의를 포함 (such as gradients) .
예 1
흰색에서 파란색으로 방사형 그라데이션으로 타원을 정의합니다 :
다음은 SVG 코드는 다음과 같습니다
예
<svg height="150" width="500">
<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>
»그것을 자신을 시도 Code explanation:
- id 의 속성 <radialGradient> 태그는 그라데이션의 고유 한 이름을 정의합니다
- CX는, 싸이와 R 속성은 가장 바깥 쪽 원을 정의하고 FX와 FY는 가장 안쪽 원을 정의
- 그래디언트의 색상 범위는 두 가지 이상의 색으로 구성 할 수있다. 각 색상은 지정됩니다 <stop> 태그입니다. offset 그라데이션 색 시작 및 끝 위치를 속성을 정의하는 데 사용
- fill 특성은 구배 타원 소자 링크
예 2
흰색에서 파란색으로 방사형 그라데이션으로 다른 타원을 정의합니다 :
다음은 SVG 코드는 다음과 같습니다
예
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" 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(#grad2)" />
</svg>
»그것을 자신을 시도