Creating dynamic SVG elements in JavaScriptBlog Post link: http://jbkflex.wordpress.com/2011/06/21/creating-dynamic-svg-el...
myCircle.setAttributeNS(null,"cx",100);                   myCircle.setAttributeNS(null,"cy",100);                   myCirc...
Upcoming SlideShare
Loading in …5
×

Creating dynamic SVG elements in JavaScript

1,848 views
1,642 views

Published on

While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements
dynamically in JavaScript. For example creating vector circles inside a for loop and adding them to the page. HTML5
supports inline SVG, so you can directly use <svg>your code</svg> inside <body> to create vector graphics. But I had the task of creating them in the script. So I have put forward a small example and here is how to do it.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,848
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating dynamic SVG elements in JavaScript

  1. 1. Creating dynamic SVG elements in JavaScriptBlog Post link: http://jbkflex.wordpress.com/2011/06/21/creating-dynamic-svg-elements-in-javascript/While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elementsdynamically in JavaScript. For example creating vector circles inside a for loop and adding them to the page. HTML5supports inline SVG, so you can directly use <svg>your code</svg> inside <body> to create vector graphics. But I had the task of creating themin the script. So I have put forward a small example and here is how to do it.To create a vector circle of radius 50, var svgNS = "http://www.w3.org/2000/svg"; var myCircle = document.createElementNS(svgNS,"circle"); myCircle.setAttributeNS(null,"id","mycircle"); myCircle.setAttributeNS(null,"cx",100); myCircle.setAttributeNS(null,"cy",100); myCircle.setAttributeNS(null,"r",50); myCircle.setAttributeNS(null,"fill","black"); myCircle.setAttributeNS(null,"stroke","none");where cx = x-coordinate of the center where you want the circle to be, similarly cy is the y-coordinate of the center.Now that our circle is ready, we want to add it to the page, rather view it. Till now we did not add the circle to theDOM. It is important to note thatSVG elements when added to our HTML page becomes a part of the DOM, so later you can access the elements in JavaScript code andmanipulate their properties.Since html5 supports inline SVG, so write this inside your body, <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>I have used an id with the svg tag. Access the SVG tag by its id in JavaScript code and then add the circle, document.getElementById("mySVG").appendChild(myCircle);You should be able to see a black dark circle of radius 50 in your page at 100,100 from top left corner of the browser. Here is the full code thatyou can use directly, <html> <head> <title>Dynamic Vector Circle</title> <script type="text/javascript"> var svgNS = "http://www.w3.org/2000/svg"; function createCircle() { var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle, for rectangle use rectangle myCircle.setAttributeNS(null,"id","mycircle");
  2. 2. myCircle.setAttributeNS(null,"cx",100); myCircle.setAttributeNS(null,"cy",100); myCircle.setAttributeNS(null,"r",50); myCircle.setAttributeNS(null,"fill","black"); myCircle.setAttributeNS(null,"stroke","none"); document.getElementById("mySVG").appendChild(myCircle); } </script> </head> <body onload="createCircle();"> <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> </body> </html>Similarly you can create other vector shapes like rectangles ,paths.However, there is better option of doing all this. Creating dynamic vector shapes in JavaScript has been made very easy bythe Raphael JavaScript library. It is very lightweight and has lots of features like charts, complex vector shapes, image crop etc.

×