SVG Radyal Geçiş

SVG renk geçişleri, <defs> etiketi içinde tanımlanmalıdır.

Radyal geçiş

<radialGradient> etiketi, radyal geçişleri tanımlamak için kullanılır.

<radialGradient> etiketi, <defs> içinde yer almalıdır.<defs> etiketi, definitions kelimesinin kısaltmasıdır ve renk geçişleri gibi özel elementleri tanımlamak için izin verir.

Aşağıdaki kodu not defterine kopyalayıp, dosyayı "radial1.svg" olarak kaydedin. Bu dosyayı web dizininize ekleyin:

<?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>

Kod açıklaması:

<radialGradient> etiketinin id özelliği, renk geçişine benzersiz bir ad vermek için kullanılabilir, fill:url(#grey_blue) özelliği, ellipse elementini bu renk geçişine bağlar, cx, cy ve r özellikleri dış çemberi tanımlar, fx ve fy ise iç çemberi tanımlar Renk geçişlerinin renk aralığı iki veya daha fazla renkten oluşabilir. Her renk, bir <stop> etiketi ile belirlenir. offset özelliği, renk geçişinin başlangıç ve bitiş konumunu tanımlar.

Örnekleri Gör

Bir başka örnek:

<?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>

Örnekleri Gör