مثال SVG
- الصفحة السابقة التدرج الرadiال SVG
- الصفحة التالية دليل مرجعي لSVG
جرب هذا المثال بنفسك
سيتم عرض مثال في الأسفل مباشرة في رمز HTML.
يستخدم Firefox و Internet Explorer 9 و Google Chrome و Opera و Safari هذا الأسلوب.
مثال SVG
شكل أساسي SVG
- دائرة
- مستطيل
- مستطيل غير شفاف
- مستطيل غير شفاف度为 2
- مستطيل به زوايا مستديرة
- oval
- ثلاثة ovals يتداخلون
- إثنين من الovals
- خط
- مضلع ذو ثلاثة أضلاع
- مضلع ذو أربعة أضلاع
- نجمة
- نجمة أخرى
- خط منحني
- خط منحني آخر
- مسار
- قوس بيزار كوبيير
- كتابة نص
- تدوير النص
- نص متعدد الأسطر
- نص كرابط
- تحديد لون الخط أو النص أو الشكل (stroke)
- تحديد عرض الخط أو النص أو الشكل (stroke-width)
- تحديد نهايات المسارات المفتوحة المختلفة (stroke-linecap)
- تحديد نوع الخط (stroke-dasharray)
مرشحات SVG
- feGaussianBlur - تأثير التوهين
- feOffset - تحريك مستطيل، ثم دمج الصورة الأصلية في الصورة المحركة
- feOffset - توهين الصورة المعدلة
- feOffset - جعل الظل أسود
- feOffset - معالجة الظل بألوان معينة
- مرشح feBlend
- مرشح 1
- مرشح 2
- مرشح 3
- مرشح 4
- مرشح 5
- مرشح 6
تدرج SVG
- ellipse تحتوي على تدريجي أفقي من الأصفر إلى الأحمر
- ellipse تحتوي على تدريجي عمودي من الأصفر إلى الأحمر
- ellipse و نص مع تدريجي أفقي من الأصفر إلى الأحمر
- ellipse تحتوي على تدريجي من الأبيض إلى الأزرق
- ellipse تحتوي على تدريجي من الأبيض إلى الأزرق
متنوعات SVG
- مستطيل يختفي تكرارًا في غضون 5 ثوان
- مستطيل يتغير اللون ويكبر باستمرار
- ثلاث مستطيلات يمكن أن تغير الألوان
- التمرير حول مسار الحركة النصية
- التمرير حول مسار الحركة، التدوير والتصغير والكبير لنسخة نصية
- التمرير حول مسار الحركة، التدوير والتصغير والكبير لنسخة نصية + الشكل المستمر في التمدد يتغير لون النص
- التمرير حول بيضة
- الصفحة السابقة التدرج الرadiال SVG
- الصفحة التالية دليل مرجعي لSVG
