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

Question

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:

<foreignObject x="78" y="460" width="1100" height="220" style="color:white;text-align:center">
       <body xmlns="http://www.w3.org/1999/xhtml">
           <p id="text">Your words here</p>
       </body>
    </foreignObject>

No where near. At all. I need one line of text to be pushed up when the second comes. — thinkrite, Oct 10 '14 at 07:30
I'm not sure what you mean. That page tells you exactly how to do it. — Paul LeBeau, Oct 10 '14 at 14:24

score 10 · Accepted Answer · answered Oct 10 '14 at 14:39

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

<svg width="500" height="200">
    <rect x="0" y="0" width="500" height="200" fill="orange"/>
    <foreignObject x="0" y="0" width="500" height="200">
       <style>
          div { display: table; font-size: 60px; width: 500px; height: 200px; }
          p   { display: table-cell; text-align: center; vertical-align: middle; }
       </style>
       <body xmlns="http://www.w3.org/1999/xhtml">
           <div>
              <p id="text">Your words here</p>
           </div>
       </body>
    </foreignObject>
</svg>

If you add more text to the <p> 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.

The use of the table values for `display` is so that you can use `vertical-align`. This property only has the effect of centering vertically, when used in table cells. See: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — Paul LeBeau, Oct 12 '14 at 03:21

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

1 Answers1