MobileRead Forums - View Single Post

Turtle91 · 05-30-2015, 10:12 AM

If anyone needs an example of the SVG method mentioned above:

Code:

<body style="background-color:black">
    <div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 881 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      
      <image height="1500" width="881" xlink:href="../Images/map.jpg" />

      <text text-anchor="middle" x="50%" y="40" style="fill:white; font-size:50px; font-family:serif">Caption</text>
     
  </svg>
  </div>
</body>

I have the code set as a template. I just correct the name of the file and the caption, and, if needed, change the font-size, y=, and image dimensions. Remember to add room for the caption to the image/viewbox heights.

Cheers!

05-30-2015, 10:12 AM	#10
Turtle91 A Hairy Wizard Posts: 3,361 Karma: 20212223 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	If anyone needs an example of the SVG method mentioned above: Code: <body style="background-color:black"> <div style="margin:0; padding:0; text-align:center"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 881 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="1500" width="881" xlink:href="../Images/map.jpg" /> <text text-anchor="middle" x="50%" y="40" style="fill:white; font-size:50px; font-family:serif">Caption</text> </svg> </div> </body> I have the code set as a template. I just correct the name of the file and the caption, and, if needed, change the font-size, y=, and image dimensions. Remember to add room for the caption to the image/viewbox heights. Cheers!