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

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

JAVA SCRIPT - Accessing SVG from Web Page Script

Accessing SVG from Web Page Script


Problem

You want to modify the contents of an SVG element from script within the web page. 


Solution

If the SVG is embedded directly in the web page, access the element and its attributes using the same functionality you would use with any other web page element:

var square = document.getElementById("ssquare");
square.setAttribute("width", "500");

However, if the SVG is in an external SVG file embedded into the page via an object element, you have to get the document for the external SVG file in order to access the SVG elements. The technique requires object detection because the process differs by browser:


// set element onclick event handler
window.onload=function () {
 var object = document.getElementById("object");
 var svgdoc;
 try {
 svgdoc = object.contentDocument;
 } catch(e) {
 try {
 svgdoc = object.getSVGDocument();
 } catch (e) {
 alert("SVG in object not supported in your environment");
 }
 }
 if (!svgdoc) return;
 var square = svgdoc.getElementById('square');
 square.setAttribute("width", "500");


EXPLAIN


 The first option listed in the solution accesses SVG embedded in an HTML file. You can access SVG elements using the same methods you’ve used to access HTML elements. The second option is a little more involved, and depends on retrieving the document object for the SVG document.

The first approach tries to access the contentDocument property on the object. If this fails, the application then tries to access the SVG document using getSVGDocument(). Once you have access to the SVG document object, you can use the same DOM methods you would use with elements native to the web page. Accessing SVG in an object element from script.


<!DOCTYPE html>
<head>
<title>SVG in Object</title>
<meta charset="utf-8" />
</head>
<body>
<object id="object" data="rect.svg"
style="padding: 20px; width: 600px; height: 600px">
<p>No SVG support</p>
</object>
<script type="text/javascript">
 var object = document.getElementById("object");
 object.onload=function() {
 var svgdoc;
 // get access to the SVG document object
 try {
 svgdoc = object.contentDocument;
 } catch(e) {
 try {
 svgdoc = object.getSVGDocument();
 } catch (e) {
 alert("SVG in object not supported in your environment");
 }
 }
 if (!svgdoc) return;
 var r = svgdoc.rootElement;
 // get SVG element and modify
 var square = svgdoc.getElementById('square');
 square.onclick = function() {
 var width = parseFloat(square.getAttribute("width"));
 width-=50;
 square.setAttribute("width",width);
 var color = square.getAttribute("fill");
 if (color == "blue") {
 square.setAttribute("fill","yellow");
square.setAttribute("stroke","green");
 } else {
 square.setAttribute("fill","blue");
 square.setAttribute("stroke","red");
 }
 }
 }
</script>
</body>


In addition to the different approaches to get the SVG document, you also have to handle browser differences in how the onload event handler works. Firefox and Opera fire the onload event handler for the window after all the document contents have loaded, in‐ cluding the SVG in the object element.

 However, Safari and Chrome, probably because of the shared core, fire the window.onload event handler before the SVG has finished loading. In the example code, the object is accessed in script after it has loaded; the object.on load event handler is then accessed to get the SVG document and assigned the function to the onclick event handler.

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");