SVG - Etkileşim

SVG görüntüleri, kullanıcı eylemlerine duyarlı hale getirilebilir. SVG, işaretçi olaylarını, klavye olaylarını ve belge olaylarını destekler. Aşağıdaki örneği düşünün.

Misal

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>

Açıklama

SVG, JavaScript / ECMAScript işlevlerini destekler. Komut dosyası bloğu, XML'de karakter veri desteğini göz önünde bulundurarak CDATA bloğunda olacaktır.
SVG öğeleri, fare olaylarını ve klavye olaylarını destekler. Bir javascript işlevini çağırmak için onClick olayını kullandık.
JavaScript işlevlerinde belge, SVG belgesini temsil eder ve SVG öğelerini almak için kullanılabilir.
JavaScript işlevlerinde olay, geçerli olayı temsil eder ve olayın ortaya çıktığı hedef öğeyi elde etmek için kullanılabilir.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler. Sonucu görmek için her bir metne ve dikdörtgene tıklayın.