View Single Post
Old 01-03-2013, 12:57 PM   #3
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 38
Karma: 10
Join Date: Aug 2011
Device: Ipad
I am confused now. I tried some things out with your code seeing that your text is indeed centered. But then I decided to remove any parameters I think might center it from the html document to make sure what is what. With no code to control the centering your SVG is still centered.

When I use my own it does not change position at all?

Yours pasted into my document (no alignment controlling factors):

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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">
	<head>
		<title>LALTROUOMOBOOK_3ONEPAGE-3</title>
	
	</head>
	
     <div id="toc_marker-1"></div>   

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   id="svg2"
   xml:space="preserve" viewBox="0 0 395.22656 688.82343" ><metadata
     id="metadata8"></metadata><defs
     id="defs6" /><g
     transform="matrix(1.25,0,0,-1.25,0,688.82344)"
     id="g10"><g
       transform="translate(72,477)"
       id="g12"><text
         transform="matrix(1,0,0,-1,-37.57,-83.26)"
         id="text14"><tspan
           x="0 43.327873 74.9673 93.238899 117.6906 134.01413 172.10236 190.37395 225.30495"
           y="0"
           id="tspan16"
           style="font-size:67.17500305px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Patriots:</tspan></text>
<text
         transform="matrix(1,0,0,-1,-22.32,-123.72)"
         id="text18"><tspan
           x="0 26.097876 44.134632 60.794281 88.638733 96.800613 113.46027 130.92603 139.35661 157.09108 168.74611 187.75693"
           y="0"
           id="tspan20"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Enemies From</tspan><tspan
           x="60.369999 93.75647 101.88477 111.02071 129.05746 137.18576"
           y="40.450001"
           id="tspan22"
           style="font-size:33.58800125px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Within</tspan></text>
<text
         transform="matrix(1,0,0,-1,40.18,-268.69)"
         id="text24"><tspan
           x="0 21.16044 31.681881 42.791111 51.980228 61.698357 66.459457 71.377296 82.192635"
           y="0"
           id="tspan26"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Anovel by</tspan><tspan
           x="-34.610001 -18.563334 -9.3350296 -0.145913 4.6151862 15.430522 20.348366 37.335495 43.389732 48.307575 63.257034 72.504929 77.834229 92.195892 103.32472 114.43395"
           y="23.6"
           id="tspan28"
           style="font-size:19.59300041px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">David A. Gatwood</tspan></text>
<text
         transform="matrix(1,0,0,-1,-34.92,-381.8)"
         id="text30"><tspan
           x="0 9.7989101 16.940275 23.892715 29.308565 33.905739 36.966324 43.918766 50.682281"
           y="0"
           id="tspan32"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">Copyright</tspan></text>
<text
         transform="matrix(1,0,0,-1,22,-381.8)"
         id="text34"><tspan
           x="0"
           y="0"
           id="tspan36"
           style="font-size:12.59500027px;font-variant:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontierCopyright"></tspan></text>
<text
         transform="matrix(1,0,0,-1,36.85,-381.8)"
         id="text38"><tspan
           x="0 6.6501598 14.43387 22.230175 29.018881 34.019096 40.68185 48.478153 52.571529 59.234283 62.39563 72.710938 78.655777 84.550232 87.610817 94.563263 97.724602 108.64447 112.53632 115.69767 125.30766 131.2525 134.67833 143.92307 151.06442 158.2058 165.15823"
           y="0"
           id="tspan40"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">2003-2012 David A. Gatwood.</tspan><tspan
           x="-9.4499998 1.00385 4.064435 7.12502 10.27377 19.99711 23.057695 30.010136 36.773651 40.19949 46.74889 49.910236 59.872879 66.120003 72.669403 78.903923 83.727814 89.634865 95.881989 102.83443"
           y="15.18"
           id="tspan42"
           style="font-size:12.59500027px;font-variant:normal;font-weight:normal;writing-mode:lr-tb;fill-opacity:1;fill-rule:nonzero;stroke:none" class="useFont_FinalFrontier">All Rights Reserved.</tspan></text>
</g></g></svg>
</body>
</html>
My SVG but your alignment code:

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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">
	<head>
		<title>TEST</title>
		
<style type="text/css">
    html,body {
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
</style>
	</head>
	<body style="height: 100%; width: 100%;" >
<div style="width: 100%; height: 100%;">
     <div id="toc_marker-1"></div>    
    
  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          width="100%" height="100%" x="0" y="0%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet" >
	 
<g id="Layer_1_1_">
	<g id="Layer_3">
		<polygon fill="#BF0A1E" points="660.2,0 660.2,182.3 647.9,182.3 647.9,362.4 523.1,362.4 523.1,542.5 768,542.5 768,734.3 
			0,734.3 0,0 		"/>
	</g>
</g>
<g>
	<rect y="-3" fill="none" width="725" height="800"/>
	<path d="M131,109.5H65.6V143h73.2v40h-122V1H135v40H65.6v29.2H131V109.5z"/>
	<path d="M164.1,3.7c15.7-2.7,36.5-4.1,58.1-4.1c34.8,0,57,5.7,74.8,18.1c20,13.8,32.9,36.5,32.9,69.9c0,37.3-14,61.3-31.6,75.1
		c-20,15.7-50,22.4-85.6,22.4c-23.5,0-39.2-1.6-48.6-3.2V3.7z M213,146.8c2.4,0.5,7,0.5,10.3,0.5c31.6,0.5,55.1-17,55.1-58.1
		c0-35.6-21.3-52.4-50.5-52.4c-7.6,0-12.4,0.5-14.9,1.1V146.8z"/>
	<path d="M401.4,1v182h-48.9V1H401.4z"/>
	<path d="M463.2,42h-46.4V1h142.6v41h-47.3V183h-48.9V42z"/>
	<path d="M626,76.9v31.6h-72.4V76.9H626z"/>
	<path d="M96.7,365.9c-56.4,0-87.5-42.4-87.5-92.9c0-52.9,34.6-95,90.5-95c58.6,0,88.3,43.5,88.3,92.1c0,58.6-35.1,95.9-91,95.9
		H96.7z M99.1,327.3c23.5,0,37.3-22.7,37.3-55.6c0-31.3-14-55.1-37.8-55.1c-23.5,0-37.8,23.8-37.8,55.4
		c-0.3,32.7,14.3,55.4,37.8,55.4H99.1z"/>
	<path d="M210.6,183.7c13.8-2.2,34.6-4.1,58.9-4.1c27.8,0,47.8,3.8,61.6,14.3c11.6,8.9,17.8,21.9,17.8,39.4c0,22.7-17,38.6-31.1,44
		v0.8c11.9,5.4,18.6,17,23.2,32.7c5.4,18.6,11.3,45.1,14.9,52.1h-49.7c-2.7-5.4-7.6-19.4-12.7-42.1c-4.9-21.6-11.6-26.2-26.7-26.2
		H259V363h-48.3V183.7z M259,259.6h12.7c18.4,0,28.9-8.9,28.9-22.4c0-13.5-8.9-21.3-25.1-21.3c-9.2,0-14,0.5-16.5,1.1V259.6z"/>
	<path d="M429.6,176.1c-9.5,28.1-21.1,53.2-35.6,77l-29.2,2.4c9.2-26.2,16.2-51.3,20.3-77L429.6,176.1z"/>
	<path d="M447.5,314.4c11.1,5.7,28.9,11.3,47.3,11.3c16.7,0,24.8-5.7,24.8-14.9c0-8.9-8.1-13.8-28.6-20.8
		c-30.8-11.1-51.3-27.8-51.3-54.8c0-32.1,27.3-57,73.2-57c21.6,0,37.3,4.1,49.1,9.2l-10.3,39.2c-7.8-3.5-21.3-8.6-39.4-8.6
		c-14.9,0-23,5.4-23,13.5c0,9.2,9.7,12.7,32.7,21.3c32.7,12.1,47.3,29.4,47.3,54.8c0,31.3-24.3,58.1-77.5,58.1
		c-21.9,0-43.2-5.7-53.5-11.1L447.5,314.4z"/>
	<path d="M16.7,361h48.9v141.2h69.9V543H16.7V361z"/>
	<path d="M266.1,469.5h-65.3V503h73.2v40h-122V361h118.3v40h-69.4v29.2h65.3V469.5z"/>
	<path d="M331.1,402h-46.4v-41h142.6v41H380V543h-48.9V402z"/>
	<path d="M493.9,436.9v31.6h-72.4v-31.6H493.9z"/>
	<path d="M52.1,582H5.7v-41h142.6v41H101V723H52.1V582z"/>
	<path d="M278.2,649.5h-65.3V683H286v40H164V541h118.3v40h-69.4v29.2h65.3V649.5z"/>
	<path d="M311.4,543.7c13.8-2.2,34.6-4,58.9-4c27.8,0,47.8,3.8,61.6,14.3c11.6,8.9,17.8,21.9,17.8,39.4c0,22.7-17,38.6-31.1,44v0.8
		c11.9,5.4,18.6,17,23.2,32.7c5.4,18.6,11.3,45.1,14.9,52.1h-49.7c-2.7-5.4-7.6-19.4-12.7-42.1c-4.9-21.6-11.6-26.2-26.7-26.2h-7.8
		V723h-48.3V543.7z M359.7,619.6h12.7c18.4,0,28.9-8.9,28.9-22.4c0-13.5-8.9-21.3-25.1-21.3c-9.2,0-14,0.5-16.5,1.1V619.6z"/>
</g>

<g id="hidden_full_text">
	<text transform="matrix(1 0 0 1 430.5 531.7754)" fill="#BF0A1E" font-family="'MyriadPro-Regular'" font-size="10">EDITOR'S LETTER</text>
</g>

</svg>
</div>
	 	</body>
</html>
I should have added that another reason I used outlines instead of text as you recommended is to maintain the look of the graphic element. If I use glyphs to embed the font some e-readers will still ignore it. This way it stays searchable and will look the same everywhere.

I do think you are more adept at SVG then I am, I am still learning a lot. But in the context of what I want to achieve, is'nt that a good solution?

On the plus side, older Kindle models (4th gen is used as a standard in Kindle Previewer I believe) do not show the svg graphics but at least shows the content within the text tags in the svg. A relatively good fall-back I guess.

I really appreciate your help, thanks!
FunkeXMix is offline   Reply With Quote