drawSVG.js is a very lightweight Javascript library for making SVG images on a page.
Creating an SVG
Create an SVG object with:
var mySVG = new SVG({ width: 400, height: 200 });Pass in any attributes you want in a object. In this case, the SVG will have a width of 400 pixels and height of 200 pixels.
To display the SVG use:
mySVG.show('target');This will get the element with an id of "target", and replace its contents with the SVG element.
Adding elements
Elements can be added the SVG using the addChild() method.
mySVG.addChild('rect', {x: 10: y: 20, width: 100: height: 80, fill: '#88f'})The first parameter is the type of element. The second parameter is a object containing the attributes for the element. A third parameter can be included, which is an array of child elements.
The addChild() method returns the element that it creates so you can add children to it. e.g.
var myGroup = mySVG.addChild('g', { opacity: 0.5 });
myGroup.addChild('rect', {x: 10: y: 20, width: 100: height: 80, fill: '#88f'})Note that all SVG elements have an addChild() method.
Comments (1)
khizar on 27 Feb 2019, 3:48 a.m.
Working on svg maps