javascript - How to manipulate svg foreign object html text wrapping and positioning?

So I'm making a photo frame designer. Instead of a fiddle have the website as it's so much easier. Here it is.

Basically on the text input it prints the text to the SVG frame which uses an embedded foreign object tag so I can access it's auto text wrap. The problem comes with the positioning of the text. When the words are on two lines the positioning is correct. However whilst on a single line, the text is too high. I need it to be center between the photo slots and the bottom of the frame. This can be done easily by adjusting the foreign object's "y" value. However this then causes the two line text to be two low and out of position. I have no idea how I can fix this. Perhaps jQuery or javascript? Thanks.

The code:

       
           
Your words here
       
    

Answer

To prove my point, below is a sample, using one of the techniques from the suggested duplicate question page.

    
    
       
       
           

              
Your words here
           
       
    

If you add more text to the

element, the text will remain centred.

For example, here is a demo with two SVGs, the only difference between them is the length of the text paragraph.