How to align a group (instead of text) along a path in svg?

Question

Lets assume I have programmatically created a circle and some text, that I want to align along the circle. I am able to do so usin

Answer 1

As a starting point here is the workaround I mentioned. It uses some invisible placeholder text and extracts the transformation information with

placeHolder.getBoundingClientRect();

and

placeHolder.getRotationOfChar(0);

The result is only an approximation that depends on the font size and on the character of the placeholder.

var svg = document.getElementById('svg');
var text = document.createElement('text');
text.setAttribute('fill','black');
svg.appendChild(text);

var placeHolder = document.getElementById('placeholder');
var placeHolderBounds = placeHolder.getBoundingClientRect();
var angle = placeHolder.getRotationOfChar(0);

var group = document.getElementById('my-group');
var groupBounds = group.getBoundingClientRect();
var dx = 0; //groupBounds.width/2;   
var dy = -groupBounds.height;   
var x = placeHolderBounds.x;
var y = placeHolderBounds.y;

var transform = 'translate(' + x +','+ y +') '+ 
                 'rotate('+ angle +') '+ 
                 'translate('+ dx +','+ dy +')';
group.setAttribute('transform', transform);