SVG Tundu Kwaya

يجب تعريف التدرج في علامة <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) تقوم بربط عنصر ellipse بهذا التدرج
  • خصائص 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>

View Example (Vertical Gradient)