آموزش SVG | قسمت دوم | SVG در HTML

آموزش SVG | قسمت دوم | SVG در HTMLReviewed by همیار پروژه on Jun 6Rating: 3.5آموزش SVG | قسمت دوم | SVG در HTMLآموزش SVG | قسمت دوم | SVG در HTML

SVG در HTML

آموزش SVG | قسمت دوم | SVG در HTML

با قسمت دوم آموزش SVG در خدمت شما عزیزان هستیم . در این قسمت به شما روش اضافه کردن SVG به صفحات HTML به طور مستقیم (SVG در HTML) را آموزش میدهیم. در HTML5، شما می توانید عناصر SVG را به طور مستقیم در صفحات HTML خود جاسازی کنید.

اضافه کردن SVG به صفحات HTML به طور مستقیم :

در پایین شما کد ساخت یک دایره با SVG به شکل زیر را مشاهده میکنید :

آموزش SVGکد ساخت یک دایره مانند تصویر بالا:

راهنمای کدهای بالا:

  1. یک عکس SVG با استفاده از عنصر <svg> آغاز می شود.
  2. با استفاده از خصوصیات width و height در درون عنصر <svg>، به ترتیب، عرض و ارتفاع عکس SVG را تعریف می کنیم.
  3. برای رسم یک دایره، از عنصر <circle> استفاده می کنیم.
  4. خصوصیات cx و cy، به ترتیب مختصات x و y از مرکز دایره را مشخص می کنند. اگر که cx و cy تعریف نشوند، مرکز دایره به مختصات (0,0) تنظیم خواهد شد.
  5. خصوصیت r، شعاع دایره را مشخص می کند.
  6. خصوصیات stroke و stroke-width درواقع خط دور دایره(کادر) را مشخص می کنند. در اینجا رنگ کادر را با استفاده از خصوصیت stroke برابر با green قرار دادیم، و ضخامت این خط را با استفاده از خصوصیت stroke-width برابر با 4px قرار داده ایم.
  7. خصوصیت fill، رنگ درون دایره را مشخص می کند. که در اینجا ما آن را برابر با رنگ yellow قرار داده ایم.
  8. اکنون که کار تمام شده است، با استفاده از تگ <svg/> عکس svg را می بندیم.
پیشنهاد ویژه :   دانلود DevComponents DotNetBar v12.8.0.8 - کامپوننت های برنامه نویسی Net.

منبع : www.w3schools.com

همیار پروژه SVG

دیدگاه خود را بیان کنید