dynamic SVG image

In the previous page it was shown how to modify existing elements in a SVG.
Now I want to create an image dynamical:
Instanciate an object by using , assigning formatting classes and position it on the canvas.

Important: When using , the position of the new object will be relative to the template object, not relativ to viewbox ! I place all template objects at the "zero"-position in my image. They are all added to a "template"-layer and this layer is hidden.
Also make sure that the layer-groups dont have an offset set. There has to be a "layer1" that will hold the instanciated objets.

Important#2: Template objects should be unscaled or they will return wrong cx(),cy(),x(),y().

In the code below, 2 rooms are instantiated and connected with a polyline. Note that the rooms centerpoint needs to be offset by the center-position of the template. Also insertBefore is used, otherwide the line would be drawn on top of the rooms.

draw = SVG().addTo('#canvas').size(width, height); draw.rect(width, height).attr({ fill: '#303030'}); var node = SVG(window.gm.images'template2'); //get the source-svg var group=node.find('#layer1')[0]; //fetch a layergroup by id to add to var tmpl = node.find('#tmplRoom')[0]; var ox= tmpl.cx(),oy=tmpl.cy(); //offset in pixel var A1 = group.use('tmplRoom').attr({id:"Tile_A1"}).move(0, 0).addClass('roomFound'); var B2 = group.use('tmplRoom').attr({id:"Tile_B2"}).move(0, 20).addClass('roomVisited'); var door = group.polyline(A1.cx()+ox,A1.cy()+oy], [B2.cx()+ox,B2.cy()+oy).attr({id:"A1B2"}).insertBefore(A1).addClass('pathFound'); node.addTo(draw);