التدرجات الخطية في SVG

تدرج SVG

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

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

  • التدرج الخطي
  • التدرج المتفرع

تدرج خطي SVG - <linearGradient>

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

<linearGradient> يجب أن تكون العناصر محاطة <defs> داخل العلامة.<defs> الإشارة إلى العناصر المحددة (مثل المرشحات) كتعريف مختصر.

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

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

مثال 1

تحديد دائرة مستديرة من لون الذهبي إلى الأحمر بالتدرج الخطي المستقيم:

هذا هو كود SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

جرب بنفسك

توضيح الكود:

  • تعين خاصية id لـ <linearGradient> تعريف الاسم الفريد للتدرج
  • تعين خاصية x1،x2،y1،y2 لـ <linearGradient> تعريف بداية ونهاية التدرج
  • يمكن أن تتكون نطاق الألوان للتدرج من لونين أو أكثر. يتم تحديد كل لون باستخدام علامة <stop>
  • يستخدم الخاصية offset لتعريف بداية ونهاية لون التدرج
  • يربط الخاصية fill عنصر المثلث المستطيل إلى التدرج

مثال 2

يحدد هذا المثلث المستطيل ويضيف النص داخل المثلث، وهو يحتوي على هالة خطية من الأصفر إلى الأحمر من أعلى إلى أسفل:

هذا هو كود SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

جرب بنفسك

مثال 3

يحدد هذا المثلث المستطيل ويضيف النص داخل المثلث، وهو يحتوي على هالة خطية من الأصفر إلى الأحمر من جهة اليمين إلى اليسار:

SVG

هذا هو كود SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

جرب بنفسك

توضيح الكود:

  • يستخدم علامة <text> لإضافة النص