Quote:
Originally Posted by RbnJrg
You have two variations:
1. Caption inside the svg image wrapper:
Code:
<body>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="33%" y="95%" fill="red">Barak Obama</text>
</svg>
</div>
</body>
2. Caption outside the svg image wrapper:
Code:
<body>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="40%" y="20" fill="black">Barak Obama</text>
</svg>
</body>
But is not easy to center the text proceding of that way.
Regards
Rubén |
The second svg is not really necessary since the x, y can be used to space the text at the bottom of the image or under it. No need for a wrapper. Just size the svg height to more than the image height and it should be fine. Centering is a trial and error approach but the use can specify the length of the line of text and it will been spaced within the length.
Dale