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>
خودتان امتحان کنید»<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 را می بندیم.
- نوشته شده توسط احسان عباسی
- بازدید: 6747
دیدگاه‌ها
سلام
کارتون حرف نداره
خدا قوت