Thread: <svg><text>
View Single Post
Old 06-20-2022, 09:16 PM   #1
Karellen
Evangelist
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 423
Karma: 1242410
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
<svg><text>

epub v3.0
Reference... https://developer.mozilla.org/en-US/...Tutorial/Texts

I am attempting to add an image and a note underneath the image.

If I used a simple <img> tag, the note ends up on the next page, even though there is enough space on the page for the text

I am now trying to use the <svg> with a <text> field, but I can't seem to get the text to wrap. Instead the start and end of the text disappears off the edges of the page.

This is my code...

PHP Code:
<div class="nopagebreak">

    <
svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 533 800" preserveAspectRatio="xMidYMid meet">
      <
image width="533" height="800" xlink:href="../Images/stepper.jpeg"/>
      <
text x="256" y="750" text-anchor="middle" class="centre">The plan for Willis Linsay&#8217;s original ‘Stepper’ as anonymously posted online.</text>
      
<text x="256" y="770" text-anchor="middle" class="centre">(please notethe publisher accepts no responsibility for the inappropriate use of this diagram or the technology it represents.)</text>
    </
svg>

</
div
Which gives me what is shown in the image.

How do I force the text to wrap to the next line, using centre align method?

Also... How to remove the large top margin and centre the image horizontally. Using <div class="centre"> won't centre the image.


Thanks
Attached Thumbnails
Click image for larger version

Name:	svgtext.jpg
Views:	96
Size:	69.5 KB
ID:	194459  

Last edited by Karellen; 06-20-2022 at 09:33 PM.
Karellen is offline   Reply With Quote