SVG - Interaktivitas

Gambar SVG dapat dibuat responsif terhadap tindakan pengguna. SVG mendukung peristiwa penunjuk, peristiwa keyboard, dan peristiwa dokumen. Perhatikan contoh berikut.

Contoh

testSVG.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>

Penjelasan

SVG mendukung fungsi JavaScript / ECMAScript. Blok skrip berada di blok CDATA dengan mempertimbangkan dukungan data karakter dalam XML.
Elemen SVG mendukung acara mouse, acara keyboard. Kami telah menggunakan acara onClick untuk memanggil fungsi javascript.
Pada fungsi javascript, dokumen merepresentasikan dokumen SVG dan dapat digunakan untuk mendapatkan elemen SVG.
Dalam fungsi javascript, peristiwa mewakili peristiwa saat ini dan dapat digunakan untuk mendapatkan elemen target tempat peristiwa dimunculkan.

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Internet Explorer 9 dan lebih tinggi juga mendukung rendering gambar SVG. Klik pada setiap teks dan persegi panjang untuk melihat hasilnya.