۲۵
اسفند

جلسه ۰۸ : ایجاد واکنش گرایی در SVG

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به دوره آموزش SVG هستند. در جلسه گذشته با Gradient در svg آشنا شدیم. در این جلسه قرار است به ایجاد واکنش گرایی در svg بپردازیم.

ایجاد واکنش گرایی در SVG

تصاویر svg را می توان نسبت به اقدامات کاربر، واکنش گرا و یا اصطلاحاً responsive نمود. به این فرآیند ایجاد واکنش گرایی در svg می نامیم.
svg از pointer events و keyboard events و document events پشتیبانی می کند.
به مثال زیر توجه کنید.

مثال

testSVG.htm

مثال : estSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

<html>

<title>SVG Interactivity</title>

<body>

<h1>Sample Interactivity</h1>

<![CDATA[

function showColor() {

alert("Color of the Rectangle is: "+

document.getElementById("rect1").getAttributeNS(null,"fill"));

}

function showArea(event){

var width = parseFloat(event.target.getAttributeNS(null,"width"));

var height = parseFloat(event.target.getAttributeNS(null,"height"));

alert("Area of the rectangle is: " +width +"x"+ height);

}

function showRootChildrenCount() {

alert("Total Children: "+document.documentElement.childNodes.length);

}

]]>

</script>

<g>

<text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>

<rect id="rect1" x="100" y="100" width="200" height="200"

stroke="green" stroke-width="3" fill="red"

onClick="showArea(event)"/>

Click me to print child node count.</text>

</g>

</svg>

</body>

</html>

توضیحات

SVG از توابع JavaScript / ECMAScript پشتیبانی می کند. بلوک اسکریپت در XML باید در بلوک CDATA و در کنار character data قرار گیرد.
عناصر SVG از mouse events و keyboard events پشتیبانی می کند.
ما در این جا از onClick event برای نام گذاری تابع javascript استفاده کرده ایم.
در تابع javascript،اسناد موجود نشان دهنده اسناد svg هستند و می توانند برای دریافت عناصر svg مورد استفاده قرار گیرند.
تابع javascript،وقایع (event) ها، نشان دهنده وقایع فعلی است و می تواند در هر حادثه در حال وقوع، عنصر هدف را مشخص کند.

خروجی

textSVG.htm را در مرورگر وب Chrome باز کنید. شما می توانید از Chrome / Firefox / Opera برای مشاهده تصویر SVG به طور مستقیم و بدون هیچ افزونه ای استفاده نمایید.
اینترنت اکسپلورر ۹ و نسخه های بالا تر آن نیز از رندر تصویر SVG پشتیبانی می کند.

interactivity

کلام آخر

در این جلسه با آموزش واکنش گرایی در svg آشنا شویم.
در جلسه بعدی به پیوند سازی در svg خواهیم پرداخت.
با پی وی لرن همراه باشید.

به اشتراک بگذارید

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

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۸ : ایجاد واکنش گرایی در SVG

مقدمه

ایجاد واکنش گرایی در SVG

مثال

توضیحات

خروجی

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ