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 using the textPath element.

In addition I have a rectangular image (or any svg group ), that I also would like to align to the circle (the red rectangle in the image below is just an example; actually I would like to be able to align arbitrary svg groups as image labels on the nodes of a chord diagram.).

However, textPath only seems to work for text elements.

=> Is there something similar that works for group elements?

Or do I need to manually calculate the transformation for my group (following from some tangent of the circle)?

(A workaround could be to create some hidden text with a single letter and the same size as my group ... align it and grab its transformation. However, that feels ugly.)

user_7394871 · Answer

In addition I have a rectangular image (or any svg group ), that I also would like to align to the circle (see red rectangle in the example image below).

However, textPath only seems to work for text elements.

You can use the rectangle unicode character ▮

In this case you will be able to include it in one textPath command along with other words

You can use any unicode character that suits you

If necessary, you can make the animation of the letters

user_7394871 · Answer

As @Paul LeBeau commented:

No there is no automatic way to do that. You have to position it yourself

Consider adding svg images to text using absolute positioning

Since any text in SVG is a vector object, it has absolute coordinates x, y, as the first character of the word and the last.

Using this you can position an icon or any other vector image to the beginning or end of the text.

I put the icon in the tag and position it at the end of the word using the tag

An example with a growing line on which text and an icon are located

One more example

user_2876079 · Answer

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);

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

3 Answers