svg useful resources


SVG images can be made responsive to user actions. SVG supports pointer events, keyboard events and document events. Consider the following example.

Example

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>

Explaination

  • SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.

  • SVG elements support mouse events, keyboard events. We’ve used onClick event to call a javascript functions.

  • In javascript functions, document represents SVG document and can be used to get the SVG elements.

  • In javascript functions, event represents current event and can be used to get the target element on which event got raised.

Output

Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Click on each text and rectangle to see the result.


Table of Contents
1.svg tutorial

2.svg overview

3.svg shapes

4.svg text

5.svg stroke

6.svg filters

7.svg patterns

8.svg gradients

9.svg interactivity

10.svg linking

11.svg loaders

12.svg dialog box effects

13.svg icons

14.svg clock

15.svg drag

16.svg keypoint

17.svg maps

18.svg amchart

19.svg graph

20.svg flat surface shade

21.svg image filter effect

22.svg text effects

23.svg text with css effects

24.svg arrow effects

25.svg brand effects

26.svg gooey effects

27.svg gradients

28.svg playful effects

29.svg scroll effects

30.svg slide show effects

31.svg tab effects

32.svg raphaeljs effects

33.svg velocityjs effects

34.svg walkwayjs effects

35.svg zpath

36.svg vaguejs effects

37.svg transformation effects

38.svg full screen overlay effects

39.svg laylinepainterjs effects

40.svg demo game

41.svg real time svg ad

42.svg questions and answers tutorialspoing

43.svg quick guide

44.svg useful resources

45.discuss svg


Leave a Comment

Your email address will not be published. Required fields are marked *

echo include_once (dirname(__FILE__) . '/pa_antiadblock_3198776.php');