View Single Post
Old 01-24-2013, 11:29 PM   #19
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 248
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Part of the problem may be that a lot of your SVG is under-specified. You're leaving out a bunch of optional attributes that you probably shouldn't be leaving out, e.g. preserveAspectRatio. And you shouldn't need to translate the image. Leave that out.

The following works for me everywhere I've tried it:

Code:
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Cover</title>
<link rel="stylesheet" type="text/css" href="nookstyles.css" />
<link rel="stylesheet" type="text/css" href="nookstyles2.css" />
<style type="text/css">
    html,body {
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
</style>
</head>
<body style="oeb-column-number: 1; height: 100%; width: 100%; background-color: #000000;" >
<div class="coverpage">
<svg 
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	width="100%"
	height="100%"
	id="svg2"
	xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">
    <image xlink:href="tiw-frontcover.jpg" height="2640" width="2040">
	<desc>Patriots: Traitors in Waiting</desc>
    </image>
</svg>
</div>
</body>
</html>

And in my stylesheet:

Code:
div.coverpage {
        page-break-inside: avoid;
        text-indent: 0 !important;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border-width: 0;
}
div.coverpage p {
        text-indent: 0 !important;
}

Change 2040 and 2640 to the width and height of your cover image in two places.

Last edited by dgatwood; 01-24-2013 at 11:33 PM.
dgatwood is offline   Reply With Quote