Skip to content

Adding SVG elements

petercollingridge edited this page Oct 29, 2012 · 17 revisions

Assuming you have created an SVG object called svg (see here for details), you can add elements to it with:

svg.add('rect', {'x': 10, 'y': 20: 'width': 80, 'height': 55, 'fill': 'blue'})

This will create a rect element in the SVG like this:

 <rect y="10" x="10" height="55" fill="blue" width="80"/>

Note that attributes are stored in a hash so will be in a random order.

The type of element created is determined by the first value passed to the svg.add() method. You can create elements of any type, regardless of whether they are valid SVG elements. In addition to svg.add(), there is svg.addChildElement() which does exactly the same thing, but requires more typing and is now deprecated.

Manipulating elements

The svg.add() returns an SVGElement object which allows you to change its attributes. For example:

rect = svg.add('rect', {'x': 10, 'y': 20: 'width': 80, 'height': 55})
rect.attributes['fill'] = 'blue'

Clone this wiki locally