Menu
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>
821
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.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
