تدرج إشعاعي SVG

يجب أن يتم تعريف التدرجات في علامة <defs> في SVG.

التدرج الإشعاعي

تستخدم علامة <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>

رؤية المثال