تدرجات SVG - خطي
تدرجات SVG
التدرج اللوني هو انتقال سلس من لون إلى آخر. بالإضافة إلى ذلك ، يمكن تطبيق العديد من انتقالات اللون على نفس العنصر.
هناك نوعان رئيسيان من التدرجات في SVG:
- خطي
- شعاعي
التدرج الخطي SVG - <التدرج الخطي>
يُستخدم عنصر <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>
شرح الكود:
- تحدد سمة المعرف للعلامة <linearGradient> اسمًا فريدًا للتدرج اللوني
- تحدد سمات x1 و x2 و y1 و y2 لعلامة <linearGradient> موضع البداية والنهاية للتدرج
- يمكن أن يتكون نطاق الألوان للتدرج اللوني من لونين أو أكثر. يتم تحديد كل لون بعلامة <stop>. تُستخدم سمة الإزاحة لتحديد مكان بداية لون التدرج ونهايته
- تربط سمة التعبئة عنصر القطع الناقص بالتدرج اللوني
مثال 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 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> لإضافة نص