تدرج پرتو 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>

توضیح کد:

خصیصه id برچسب <radialGradient> می‌تواند یک نام منحصر به فرد برای تغییرات تعریف کند، خصیصه 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>

مثال را مشاهده کنید