Quote:
Originally Posted by Tex2002ans
Yes, this is what I believe GrannyGrump was initially asking for. Anyone have any examples of this? I don't recall ever running into any in all of these "image + caption" threads.
|
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