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");
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
No comments:
Post a Comment