SVG 방사성 변화

SVG 변화는 <defs> 태그 안에서 정의되어야 합니다.

방사성 변화

<radialGradient>는 방사성 변화를 정의합니다.

<radialGradient> 태그는 <defs> 태그 안에 잠재되어야 합니다. <defs> 태그는 definitions의 약자로, 변화와 같은 특수 요소를 정의하는 데 사용됩니다.

아래의 코드를 메모장에 복사하여 파일을 "radial1.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>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

코드 설명:

<radialGradient> 태그의 id 속성은 변화에 독특한 이름을 부여할 수 있습니다. fill:url(#grey_blue) 속성은 ellipse 요소를 이 변화에 연결합니다. cx, cy, r 속성은 외곽을 정의하며, fx와 fy는 내곽을 정의합니다 색상 변화의 범위는 두 가지나 그 이상의 색상으로 구성될 수 있습니다. 각 색상은 <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>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

예제 보기