javascript - Clone a SVG path and put it in an other SVG -

i'm real noob in svg manipulation. need copy svg path , paste in other svg. other svg have different position , different size. problem when copy svg path keeps position , don't stay in new svg viewport.

in order copy svg use :

$('.svg_thumb svg').append($('#head').clone() ); 

you can play example : http://jsfiddle.net/uk4c2jqr/

following example : head in center of read square example 1.

you may use transform=translate(x,y) method :

var tb_head = $('#head').clone(); tb_head.attr('transform', 'translate(-325, -85)'); $('.svg_thumb svg').append(tb_head); 

fiddle

edit op's request :

in order calculate x , y values, best way refactor path starts position 0,0.

but can find approximation using getboundingclientrect() method :

var originalpath = $('#head'), thumb_head = originalpath.clone(), thumb_svg = $('.svg_thumb svg'), bbox = originalpath[0].getboundingclientrect(),  xpos = thumb_svg.width()/2 - bbox.width/2 - bbox.left, ypos = thumb_svg.height()/2 - bbox.height/2 - bbox.top;  thumb_head.attr('transform', 'translate('+xpos+','+ ypos+')'); thumb_svg.append(thumb_head); 

and the fiddle