سبد (0)

SVG در HTML5

در HTML5 شما می توانید به طور مستقیم عناصر SVG را در صفحات خود وارد کنید. 


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

در زیر، یک گرافیک ساده از SVG را مشاهده می کنید:

 

و در زیر کد HTML آن را مشاهده می کنید:

مثال

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
خودتان امتحان کنید»

توضیح کدهای بالا:

  • یک عکس SVG با استفاده از عنصر <svg> آغاز می شود. 
  • با استفاده از خصوصیات width و height در درون عنصر <svg>، به ترتیب، عرض و ارتفاع عکس SVG را تعریف می کنیم. 
  • برای رسم یک دایره، از عنصر <circle> استفاده می کنیم. 
  • خصوصیات cx و cy، به ترتیب مختصات x و y از مرکز دایره را مشخص می کنند. اگر که cx و cy تعریف نشوند، مرکز دایره به مختصات (0,0) تنظیم خواهد شد. 
  • خصوصیت r، شعاع دایره را مشخص می کند. 
  • خصوصیات stroke و stroke-width درواقع خط دور دایره(کادر) را مشخص می کنند. در اینجا رنگ کادر را با استفاده از خصوصیت stroke برابر با green قرار دادیم، و ضخامت این خط را با استفاده از خصوصیت stroke-width برابر با 4px قرار داده ایم.
  • خصوصیت fill، رنگ درون دایره را مشخص می کند. که در اینجا ما آن را برابر با رنگ yellow قرار داده ایم. 
  • The closing </svg> tag closes the SVG image
  • اکنون که کار تمام شده است، با استفاده از تگ <svg/> عکس svg را می بندیم. 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان