Manipulate / translate <text> in SVG (add bounding box)

Question

Problem . We need to copy the SVG text that was created in RaphaelJS with variable fonts, font sizes, position, scale, rotation in SVG.

BUT ... Raphael uses a bounding box for text that has a height that is independent of the actual height of the line. The height of the bounding boxes is based on the font size and font family, but does not depend on the actual line. Thus, the string "Y" and "," (with the same font and font size) have the same height.

When we recreate text in SVG (generating it in PHP), we can get the right font size, and the font family is right. However, the height of the SVG is independent of the actual string. Thus, "," will have a much lower height than "Y". This difference in height breaks rotation and positioning.

QUESTION How do we create svg with a bounding box that replicates RaphaelJSs getBBox (which essentially just reduces the size of the window that will fit any character in it), so we can simulate rotation and positioning from RaphaelJS? NOTE. We can convert text-> path for SVG if that helps. We also have access to font files.

EDIT . The problem was solved using the matrix () command and the direct translation of the transforms, as opposed to applying positioning, then scaling, then rotation.

Answer 1

If you want to manipulate the positions of characters within words: sentences and SVGs that you generate on the server, then you can use the SVG TSPAN and orient the position of the character. If you can change the letters to the path, I think an algorithm will be possible. You have nothing to stop creating an array of relative positions for alphanumeric fonts. Hope some of the above are helpful ...