مثال‌های SVG
- صفحه قبلی رنگ‌های محیطی SVG
- صفحه بعدی دستورالعمل‌های مرجع SVG
این مثال‌ها را امتحان کنید
مثال‌های زیر کد SVG را مستقیماً در کد HTML قرار می‌دهند.
Firefox،Internet Explorer 9،Google Chrome،Opera وSafari از این روش حمایت می‌کنند.
مثال‌های 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 ثانیه چندین بار ناپدید می‌شوند
- یک مستطیل که به طور مداوم بزرگ می‌شود و رنگ خود را تغییر می‌دهد
- سه مستطیل که رنگ خود را تغییر می‌دهد
- جابجایی متنی که در مسیر حرکت حرکت می‌کند
- جابجایی، چرخش و بزرگ‌کردن متنی که در مسیر حرکت حرکت می‌کند
- جابجایی، چرخش و بزرگ‌کردن متنی که در مسیر حرکت حرکت می‌کند و رنگ آن تغییر می‌کند + مکعب‌های رشدکننده که رنگ آن‌ها تغییر می‌کند
- چرخش بیضی
- صفحه قبلی رنگ‌های محیطی SVG
- صفحه بعدی دستورالعمل‌های مرجع SVG
