أحدث البرامج التعليمية وتطوير الشبكة
 

SVG أمثلة


محاولة-أنها نفسك أمثلة

تضمين الأمثلة أدناه رمز SVG مباشرة إلى رمز HTML.

ويؤيد ذلك فايرفوكس، وإنترنت إكسبلورر 9، جوجل كروم، أوبرا، وسفاري.


أمثلة SVG

SVG أشكال أساسية

دائرة
مستطيل
مستطيل مع غموض
مستطيل مع التعتيم 2
مستطيل مع زوايا مدورة
القطع الناقص
ثلاثة الحذف على رأس كل منهما الآخر
اثنين من الحذف
خط
مضلع مع ثلاث جهات
مضلع مع أربعة الجانبين
نجم
نجم آخر
وشكل متعدد الخطوط
شكل متعدد الخطوط أخرى
مسار
منحنى بيزيه من الدرجة الثانية
كتابة نص
تدوير النص
النص على عدة خطوط
النص كوصلة
يحدد لون الخط، نص أو مخطط (stroke)
يحدد عرض خط، النص أو مخطط (stroke-width)
تعرف أنواع مختلفة من النهايات إلى مسار مفتوح (stroke-linecap)
خطوط يعرف متقطع (stroke-dasharray)

مرشحات SVG

feGaussianBlur - طمس الأثر
feOffset - تعويض مستطيل، ثم تمزج الأصلي في أعلى الصورة تعويض
feOffset - طمس صورة تعويض
feOffset - جعل أسود الظل
feOffset - علاج الظل كلون
مرشح feBlend
تصفية 1
مرشح 2
تصفية 3
تصفية 4
فلتر 5
تصفية 6

SVG التدرجات

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

SVG متفرقات

المستطيل الذي تتلاشى مرارا بعيدا أكثر من 5 ثوان
مستطيل المتزايدة من شأنها أن تغير اللون
ثلاثة مستطيلات من شأنها أن تغير اللون
نقل النص على طول مسار الحركة
نقل، تدوير، والنص على نطاق وعلى طول مسار الحركة
نقل، تدوير، والنص على نطاق وعلى طول مسار الحركة + مستطيل المتزايدة من شأنها أن تغير اللون
الدورية الحذف