Quote:
Originally Posted by Turtle91
You simply need to adjust the size of the viewbox - make it taller than the image - to provide the extra room for the text.
|
I played around with different viewbox settings but I couldn't get anything to work. The whitespace created by the absence of the image still covers the text in Kindle Previewer. I can see a couple pixels peeking through right above the image. This may be the divs surrounding the svg fault. I'm not familiar enough with html/css behavior.
HTML
Code:
<body>
<h2 class="hide">One Giant Leap</h2>
<div class="svg_outer">
<div class="svg_inner">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1201 1800" preserveAspectRatio="xMidYMid meet"><image width="1201" height="1800" alt="John standing triumphantly by a flag" xlink:href="../Images/Leap1small.jpeg"/>
<text class="large" x="600" y="100">Chapter Title</text>
</svg>
</div>
</div>
CSS
Code:
.svg_outer {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
}
.svg_inner {
display: block;
text-align: center;
}
text.large {
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
font-size: 700%;
font-style: italic;
text-indent: 0em;
text-align: center;
text-anchor: middle;
}