Manipulating/translating <text> in SVG (adding a bounding box)

Question

Problem: We need to replicate SVG text that was created in RaphaelJS with variable font-face, font-size, position, scale, rotation in SVG.

BUT... Raphael uses a bounding box for text which has a height that is independent of the actual height of the string. The bounding box’s height is based on font-size and font-family, but is independent of the actual string. So a string of “Y” and “,” (with the same font-face and font-size) have the same height.

When we recreate the text in SVG (by generating it in PHP) we can get the font-size correct, and the font-family correct. However, SVG ’s height is NOT independent of the actual string. So a “,” would have a much lower height then a “Y”. This difference in height breaks rotation and positioning.

QUESTION: How do we create svg with a ‘bounding box’ that replicates RaphaelJS’s getBBox (which essentially just sizes a box that would fit any character in it) so we can mimic the rotation and positioning from RaphaelJS? NOTE: We can convert text->path for the SVG, if that helps. We also have access to the font files.

EDIT: The issue was solved by using the matrix() command and directly translating the transformations over, as opposed to applying positioning, then scaling, then rotation.

Answer 1

If you're looking to manipulate character positions inside words:sentences and the SVG you are generating on the server then you should be able to make use of SVG TSPAN and orientate character position. If you can change letters to path then I think that algorithm would be possible. There's nothing to stop you creating an array of relative positions for your alphanumeric font set(s). I hope some of the above is useful...