NickName:Arnaud Ask DateTime:2013-05-05T20:29:56 Best way to move a group of SVG elements I'm looking for the best way (the faster, the cleaner...) to move a group of SVG elements. I have three ways in mind : do a loop on all elements and, for each of us, change the x and y attributes group all elements in a svg element and change its x and y attributes group all elemnts in a g element and apply the method described here : https://stackoverflow.com/a/14036803/2019761 Do you have an idea please ? Copyright Notice：Content Author:「Arnaud」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.Link to original article：https://stackoverflow.com/questions/16384541/best-way-to-move-a-group-of-svg-elements Answers Rik Del Mar 2013-05-08T11:04:48 You can move svg groups or elements with javascript\n\n// translate svg element\nfunction translate( _element , _x , _y )\n{\n var transform = _element.transform.baseVal.getItem(0); \n var mat = transform.matrix; \n\n mat = mat.translate( _x, _y ); \n transform.setMatrix( mat );\n\n}\n\n\nsee it in action:\n\nhttp://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN", Rik Del Mar 2013-05-08T12:43:55 I think that the better way is to move a group of elements.\n\nIf you look the example you can see that the ufo are translated\nand the inner motor rotate inside of it.\n(all moved elements are groups)\n\n<g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(1 0 0 1 -12.5067 69.4101)\" id=\"ufo\">\n <g transform=\"matrix(1 0 0 1 0 -2.842170943040401e-14)\">\n <path transform=\"matrix(1 0 0 1 21.6 2.8)\" width=\"92.34371368613222\" height=\"91.4899957511011\" stroke-width=\"0.83\" stroke-miterlimit=\"3\" stroke=\"none\" fill=\"url(#_1_)\" d=\"M46.1,0 C71.67,0 92… \"/> \n </g>\n <g transform=\"matrix(0.5 0.86 -0.86 0.5 74.6 24.1)\" id=\"motor\">\n <path transform=\"matrix(1 0 0 1 9.7 -2.2)\" width=\"13.11\" height=\"13.5849\" stroke-width=\"0.88\" stroke-miterlimit=\"3\" stroke=\"none\" fill=\"url(#_4_)\" d=\"M6.55,2.8… \"/> \n </g>\n</g>\n",