التدرج الدائري SVG

تدرج SVG - <radialGradient>

<radialGradient> العنصر يُستخدم لتحديد التدرج الراديال (التدرج الإشعاعي).

<radialGradient> يجب أن يتم دمج العنصر في <defs> داخل العلامة.<defs> الإعداد هو اختصار للتعريف (definitions)، ويشمل تعريف العناصر الخاصة (مثل المرشحات).

مثال 1

تعريف بيضاويًا يحتوي على تدريج خطي من الأبيض إلى الأزرق:

هذا هو كود SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

تجربة شخصية

شرح الكود:

• يحدد خاصية id في علامة <radialGradient> اسم التدرج الفريد
• تحدد خصائص cx، cy، و r أقصى دائرة، بينما تحدد fx و fy أقل دائرة
• يمكن أن تتكون نطاق الألوان للتدرج من لونين أو أكثر. يتم تحديد كل لون باستخدام علامة <stop>
• يستخدم إعداد offset لتحديد موقع البداية والنهاية للون في التدرج
• �性 fill تربط عنصر البيضاوي إلى التدرج

مثال 2

تعريف إليك بيضاويًا آخر، يحتوي على تدريج خطي من الأبيض إلى الأزرق:

هذا هو كود SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

تجربة شخصية