SVG التدرجات
التدرج هو الانتقال السلس من لون واحد إلى آخر. وبالإضافة إلى ذلك، يمكن تطبيق العديد من التحولات اللون لنفس العنصر.
هناك نوعان رئيسيان من التدرجات في SVG:
- خطي
- شعاعي
SVG الخطي التدرج - <linearGradient>
و <linearGradient> يستخدم عنصر لتحديد الانحدار الخطي.
و <linearGradient> يجب أن تتداخل عنصر ضمن <defs> العلامة. و <defs> العلامة قصيرة للحصول على تعريفات ويحتوي على تعريف العناصر الخاصة (such as gradients) .
ويمكن تعريف التدرجات الخطية كما التدرجات أفقية أو رأسية أو الزاوي:
- يتم إنشاء التدرجات الأفقية عندما 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>
انها محاولة لنفسك » Code explanation:
- و 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,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(#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>
انها محاولة لنفسك » Code explanation:
- و <text> عنصر يستخدم لإضافة نص