title: Manipulating/translating <text> in SVG (adding a bounding box)
body: <p><strong>Problem</strong>: We need to replicate SVG text that was created in RaphaelJS with variable font-face, font-size, position, scale, rotation in SVG.</p>
  
  <p><strong>BUT...</strong> 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.</p>
  
  <p>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.</p>
  
  <p><strong>QUESTION</strong>: 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.</p>
  
  <p><img src="https://i.stack.imgur.com/PzesD.jpg" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong>: The issue was solved by using the matrix() command and directly translating the transformations over, as opposed to applying positioning, then scaling, then rotation.</p>