تدرج خطي لـ SVG

يجب تعريف التدرج في <defs>.

تدرج SVG

التدرج هو انتقال سلس من لون إلى آخر. بالإضافة إلى ذلك، يمكن تطبيق انتقالات ألوان متعددة على العنصر نفسه.

هناك نوعان رئيسيان من التدرجات في SVG:

  • التدرج الخطي
  • التدرج الإشعاعي

التدرج الخطي

يمكن استخدام <linearGradient> لتعريف التدرج الخطي لـ SVG.

يجب أن يكون <linearGradient> محاطًا بـ <defs>. <defs> هي اختصار لـ definitions، حيث يمكن تعريف العناصر الخاصة مثل التدرج.

يمكن تعريف التدرج الخطي كتدرج أفقي، عمودي أو زاوي:

  • يمكن إنشاء تدرج أفقي عندما يكون y1 و y2 متساويين، ويكون x1 و x2 مختلفين
  • يمكن إنشاء تدرج عمودي عندما يكون x1 و x2 متساويين، ويكون y1 و y2 مختلفين
  • يمكن إنشاء تدرج زاوي عندما يكون x1 و x2 مختلفين، ويكون y1 و y2 مختلفين

يرجى نسخ الكود التالي إلى ملف النص، ثم حفظ الملف باسم "linear1.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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

شرح الكود:

  • يمكن استخدام خاصية id لـ <linearGradient> لتعريف اسم تدرج فريد
  • خصائص fill:url(#orange_red) ترتبط بالتدرج هذا
  • يمكن استخدام خصائص x1، x2، y1، y2 لـ <linearGradient> لتحديد موقع البداية والنهاية للتدرج
  • مجال الألوان للتدرج يمكن أن يتكون من لونين أو أكثر. يتم تحديد كل لون من خلال علامة <stop>.

عرض المثال (تدرج خطي)

مثال آخر:

<?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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

عرض المثال (التدرج العمودي)