آشنایی با SVG در HTML5
پنجشنبه 25 تیر 1394Scalable Vector Graphics که به اختصار SVG گفته میشود . در این مقاله قصد داریم امکانات HTML5 را مورد بررسی قرار دهیم
SVG Rectanlge
تگ <rect> که معرف مربع در SVG میباشد و با استفاده از این تگ شما میتوانید انواع مختلفی از اشکال با طول و عرض متفاوت ، رنگ های متفاوت ، قطر و نوع خطهای متفاوت را ترسیم کنید .
پارامترهای استفاده شده
در ادامه به یک مثال از پارامتر های ذکر شده می پردازیم :
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
class="style class" >
</rect>
<rect> : که معرف یک شکل چهار ضلعی میباشد .
x و y :که برای ترسیم اشکال در محور x و محور y ها میباشد .
طول و عرض : برای ترسیم اشکال مختلف استفاده میشود .
rx و ry : گوشه های شکل ترسیم شده را تعیین میکند .
Style : style را در داخل تگ می نویسیم .
Class : نام خارجی را برای تگ مورد نظر مشخص میکند .
به مثال زیر توجه کنید :
<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" style="fill:#00c800;stroke-width:5;stroke:#c80000">
</svg>
</body>
</html>
در دستور قبل width و height را مقدار دهی کردیم .همچنین style را مقدار دهی می کنیم .
مثال دوم :
<html>
<body>
<h1> Different Rounded Corners</h1>
<svg width="500" height="200">
<rect x="20" y="20" rx="10" ry="10" width="150" height="80" style="fill:blue;stroke:red;stroke-width:5"/>
<rect x="180" y="20" rx="20" ry="20" width="150" height="80" style="fill:grey;stroke:orange;stroke-width:5"/>
<rect x="340" y="20" rx="30" ry="30" width="150" height="80" style="fill:cyan;stroke:green;stroke-width:5">
</svg>
</body>
</html>
ترسیم شکل با حاشیه های مختلف :
<html>
<body>
<h1>Different corner rounding coordinates</h1>
<svg width="500" height="300">
<rect x="20" y="20" rx="5" ry="15" width="100" height="70" style="fill:grey;stroke:green;stroke-width:5"/>
<rect x="180" y="20" rx="10" ry="30" width="100" height="70" style="fill:pink;stroke:orange;stroke-width:5"/>
<rect x="340" y="20" rx="20" ry="50" width="100" height="70" style="fill:yellow;stroke:black;stroke-width:5">
</svg>
</body>
</html>
متال سوم :
<html>
<body>
<h1>Overlapped Rounded Corners</h1>
<svg width="300" height="200">
<rect x="30" y="20" rx="10" ry="10" width="200" height="150" style="fill:blue;stroke:red;stroke-width:15"/>
<rect x="30" y="20" rx="20" ry="20" width="200" height="150" style="fill:grey;stroke:orange;stroke-width:10"/>
<rect x="30" y="20" rx="30" ry="30" width="200" height="150" style="fill:cyan;stroke:green;stroke-width:5">
</svg>
</body>
</html>
مثال چهارم :
<html>
<body>
<h1>Rectangle with opacity</h1>
<svg width="300" height="200">
<rect x="50" y="20" width="200" height="150" style="fill:green;stroke:blue;stroke-width:5;fill-opacity:0.4;stroke-opacity:0.7">
</svg>
</body>
</html>
مثال پنجم :
<html>
<body>
<h1>Overlapped with opacity</h1>
<svg width="400" height="300">
<rect x="20" y="20" width="150" height="100" style="fill:orange;stroke:red;stroke-width:5;opacity:0.5"/>
<rect x="90" y="60" width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"/>
<rect x="240" y="20" width="150" height="100" style="fill:green;stroke:cyan;stroke-width:5;opacity:0.5"/>
</svg>
</body>
</html>
- HTML
- 2k بازدید
- 0 تشکر