Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: create-svg-rectangle-using-javascript

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: create-svg-rectangle-using-javascript
Showing posts with label create-svg-rectangle-using-javascript. Show all posts
Showing posts with label create-svg-rectangle-using-javascript. Show all posts

JAVA SCRIPT- Adding JavaScript to SVG

Adding JavaScript to SVG


Problem

You want to add JavaScript to an SVG file or element. 

Solution

JavaScript in SVG is included in script elements, just as with HTML, except with the addition of CDATA markup surrounding the script in case XHTML-sensitive charac‐ ters, such as < and >.

The DOM methods are also available for working with the SVG elements.

Demonstration of JavaScript within an SVG file


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
 <script type="text/ecmascript">
 <![CDATA[
// set element onclick event handler
 window.onload=function () {
 var square = document.getElementById("square");
 // onclick event handler, change circle radius
 square.onclick = function() {
 var color = this.getAttribute("fill");
 if (color == "#ff0000") {
 this.setAttribute("fill", "#0000ff");
 } else {
 this.setAttribute("fill","#ff0000");
 }
 }
 }
 ]]>
 </script>
 <rect id="square" width="400" height="400" fill="#ff0000"
 x="10" y="10" />
</svg>


EXPLAIN

As the solution demonstrates, SVG is XML, and the rules for embedding script into XML must be adhered to. This means providing the script type within the script tag, as well as wrapping the script contents in a CDATA block. If you don’t have the CDATA section, and your script uses characters such as < or &, your page will have errors, because the XML parser treats them as XML characters, not script.

The DOM methods, such as document.getElementById(), aren’t HTML specific; they’re usable with any XML document, including SVG. What’s new is the SVG-specific fill attribute, an attribute unique to SVG elements, such as rect. 

The code in the solution is a standalone SVG file, with a .svg extension. If we were to embed the SVG within an HTML file, , the color-changing animation would work the same. The CDATA section is removed because all modern browsers understand the SVG is now in an HTML context. If the file is XHTML, though, add them back.

SVG element , embedded into an HTML page





<!DOCTYPE html>
<html>
<head>
<title>Accessing Inline SVG</title>
<meta charset="utf-8">
</head>
<body>
<svg width="600" height="600">
 <script>
 // set element onclick event handler
 window.onload=function () {
 var square = document.getElementById("square");
 // onclick event handler, change circle radius
 square.onclick = function() {
 var color = this.getAttribute("fill");
 if (color == "#ff0000") {
 this.setAttribute("fill","#0000ff");
 } else {
 this.setAttribute("fill","#ff0000");
 }
 }
 }
 </script>
 <rect id="square" width="400" height="400" fill="#ff0000"
x="10" y="10" />
</svg>
</body>
</html>

Using SVG Libraries

There aren’t quite as many libraries for working with SVG as there are for working with Canvas, but the ones that exist are very handy. One of the most popular is the D3 library, . 

Three other popular libraries include the granddaddy of the SVG libraries, Raphaël, and the newer Snap.svg and SVG.js. All three can simplify SVG cre‐ ation and animation. You can even use Raphaël in both jsBin and jsFiddle, . The following code snippet shows an example of using Raphaël:


// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 400);
// Creates circle at x = 150, y = 140, with radius 100
var circle = paper.circle(150, 140, 100);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f0f");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#ff0");