Creating dynamic SVG elements in JavaScript
Upcoming SlideShare
Loading in...5
×
 

Creating dynamic SVG elements in JavaScript

on

  • 1,939 views

While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements...

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.

Statistics

Views

Total Views
1,939
Views on SlideShare
1,939
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating dynamic SVG elements in JavaScript Creating dynamic SVG elements in JavaScript Document Transcript

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