آشنایی با SVG در HTML5

پنجشنبه 25 تیر 1394

Scalable 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> 

احسان حسینی

نویسنده 42 مقاله در برنامه نویسان
  • HTML
  • 1k بازدید
  • 0 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

تاکنون هیچ کاربری از این پست تشکر نکرده است

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید