SVG - SPLessons
boy2 Chapter 19

SVG JavaScript

SVG - SPLessons

SVG JavaScript

shape Introduction

This chapter demonstrates about the SVG JavaScript and used to do the more general programming languages in SVG user can put some shapes which are work by using JavaScript. Following are the concepts are covered in this chapter.

  • JavaScript in SVG

JavaScript in SVG

shape Description

SVGs are mostly supported by JavaScript or ECMAScript as the scripting languages these are nearly similar languages in these, type attribute is used to intended language. SVG is not only used for those languages. The snippet below demonstrates SVG JavaScript by adding external JavaScript or Embedded inline.

<script type="text/ecmascript" xlink:href="demo/demo.js">

Some of the events of the JavaScript are tabulated below.

Event Description
onclick Used when the object is clicked.
onmouseup Used when the mouse button is released on the object.
onmousedown Used when the mouse button is pushed down on the object.
onmouseover used when the mouse cursor moved over the object.
onmouseout used when mouse cursors moved out of the object.
onmousemove used when the mouse moves on the object

The code below demonstrates the using of the SVG with JavaScript by using the above events.

<>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" xml:space="preserve" width="150" height="200" viewBox="0 0 150 200">
	

    <script type="text/ecmascript">
	<![CDATA[

    function init(evt) {
        if ( window.svgDocument == null )
            svgDocument = evt.target.ownerDocument;
    }

    var click       = 0;
    var mouseDown   = 0;
    var mouseUp     = 0;
    var mouseOver   = 0;
    var mouseMove   = 0;
    var mouseOut    = 0;
    
    function updateStats() {
        svgDocument.getElementById("clicks").firstChild.data = "onclick = " + click;
        svgDocument.getElementById("mousedowns").firstChild.data = "onmousedown = " + mouseDown;
        svgDocument.getElementById("mouseups").firstChild.data = "onmouseup = " + mouseUp;
        svgDocument.getElementById("mouseovers").firstChild.data = "onmouseover = " + mouseOver;
        svgDocument.getElementById("mousemoves").firstChild.data = "onmousemove = " + mouseMove;
        svgDocument.getElementById("mouseouts").firstChild.data = "onmouseout = " + mouseOut;
    }
    
    function msClick (evt) {
        click++;
        updateStats();
    }

    function msDown (evt) {
        mouseDown++;
        updateStats();
    }
    
    function msUp (evt) {
        mouseUp++;
        updateStats();
    }
    
    function msOver (evt) {
        mouseOver++;
        updateStats();
    }
    
    function msMove (evt) {
        mouseMove++;
        updateStats();
    }

    function msOut (evt) {
        mouseOut++;
        updateStats();
    }

    ]]></script>
	
	<!-- Pattern Definition -->
	<defs>
		<pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
				
			<rect x="0" y="0" width="5" height="5" fill="white"/>
			<rect x="5" y="5" width="5" height="5" fill="white"/>
		</pattern> 
	</defs>

	<!-- Background -->
	<rect x="0" y="0" width="100%" height="100%" fill="url(#checkerPattern)"/>

	<!-- Javascript Example -->

    <circle cx="50%" cy="25%" r="40" fill="blue" stroke-width="1" stroke="red" onclick="msClick()" onmousedown="msDown()" onmouseup="msUp()" onmouseover="msOver()" onmousemove="msMove()" onmouseout="msOut()"/>

    <rect x="5" y="95" width="140" height="95" fill="white" stroke="grey" stroke-width="2" rx="10" ry="10" opacity="0.5"/>

    <text x="10" y="110" id="clicks">onclick = 0</text>
    <text x="10" y="125" id="mousedowns">onmousedown = 0</text>
    <text x="10" y="140" id="mouseups">onmouseup = 0</text>
    <text x="10" y="155" id="mouseovers">onmouseover = 0</text>
    <text x="10" y="170" id="mousemoves">onmousemove = 0</text>
    <text x="10" y="185" id="mouseouts">onmouseout = 0</text>    

</svg>

Result

By running the above code in a preferred browser then user will get the output is as shown below.

Summary

shape Key Points

  • By using SVG JavaScript User can modify the SVG elements.
  • User need embed the SVG JavaScript code in HTML page.
  • SVGs are supported most of the scripting languages.