Everything in the g element is positioned relative to the current transform matrix. To move the content, just put the transformation in the g element: <g transform=”translate(20,2.5) rotate(10)”> <rect x=”0″ y=”0″ width=”60″ height=”10″/> </g> Links: Example from the SVG 1.1 spec
In plain Javascript, you could use Array#reduce with an object var cars = [{ make: ‘audi’, model: ‘r8’, year: ‘2012’ }, { make: ‘audi’, model: ‘rs5’, year: ‘2013’ }, { make: ‘ford’, model: ‘mustang’, year: ‘2012’ }, { make: ‘ford’, model: ‘fusion’, year: ‘2015’ }, { make: ‘kia’, model: ‘optima’, year: ‘2012’ }], result = … Read more