<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 14 (filtered medium)"><!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:"Tahoma","sans-serif";
mso-fareast-language:EN-US;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri","sans-serif";
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-AU link=blue vlink=purple><div class=WordSection1><p class=MsoNormal>I’m using SVG to embed some charts in a PDF document. Because I need to support both PDF and the web from the same SVG, I’m outputting almost identical SVG to both the HTML page and to the FO which is fed into RenderX.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Because there’s no consistency amongst browsers as to how text is aligned vertically in relation to the specified y coordinate, I use a tspan with a dy value to adjust this for each target in order to have consistent results. So the text element specifies the y coordinate for the text container, and the dy attribute of the tspan element specifies an offset within that to adjust for individual alignment handling in the browser/RenderX.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>However when I specify a dy value in the SVG that I pass to RenderX I am getting weird vertical alignment issues which disappear when I remove the dy attribute from the tspan.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>My SVG in part looks like this:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> <text x="103" y="52" text-anchor="start" font="12 'Arial'" stroke="none" stroke-width="0" fill="#5c477a" font-size="12" font-weight="bold"><o:p></o:p></p><p class=MsoNormal> <tspan dy="4">Competing</tspan><o:p></o:p></p><p class=MsoNormal> </text><o:p></o:p></p><p class=MsoNormal> <text x="377" y="52" text-anchor="end" font="12 'Arial'" stroke="none" stroke-width="0" fill="#5c477a" font-size="12" font-weight="bold"><o:p></o:p></p><p class=MsoNormal> <tspan dy="4">Collaborating</tspan><o:p></o:p></p><p class=MsoNormal> </text><o:p></o:p></p><p class=MsoNormal> <text x="103" y="310" text-anchor="start" font="12 'Arial'" stroke="none" stroke-width="0" fill="#5c477a" font-size="12" font-weight="bold"><o:p></o:p></p><p class=MsoNormal> <tspan dy="4">Avoiding</tspan><o:p></o:p></p><p class=MsoNormal> </text><o:p></o:p></p><p class=MsoNormal> <text x="377" y="310" text-anchor="end" font="12 'Arial'" stroke="none" stroke-width="0" fill="#5c477a" font-size="12" font-weight="bold"><o:p></o:p></p><p class=MsoNormal> <tspan dy="4">Accommodating</tspan><o:p></o:p></p><p class=MsoNormal> </text><o:p></o:p></p><p class=MsoNormal> <text x="240" y="181" text-anchor="middle" font="12 'Arial'" stroke="none" stroke-width="0" fill="#5c477a" font-size="12" font-weight="bold"><o:p></o:p></p><p class=MsoNormal> <tspan dy="4">Compromising</tspan><o:p></o:p></p><p class=MsoNormal> </text><o:p></o:p></p><p class=MsoNormal>When this is rendered by RenderX I see this:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><span style='mso-fareast-language:EN-AU'><img width=242 height=247 id="Picture_x0020_1" src="cid:image001.png@01CE1111.D09D77A0"></span><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>As you can see ‘Competing’ is not aligned with ‘Collaborating’ and ‘Avoiding’ is not aligned with ‘Accommodating’, despite each pair having y and dy coordinates in common. The placement of Competing and Avoiding are correct in terms of how I’m aiming to have it look, but the other two are defaulting to the baseline alignment, or are ignoring the dy attribute when text-anchor is not ‘start’. Note I am getting similar alignment problems when text-anchor=”middle”: the text in the middle of the square ‘Compromising’ is intended to be aligned centrally with the horizontal white line.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Can you let me know if there’s a work around for this, or if there’s an issue with my SVG? <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p></div>
!DSPAM:87,5126f9439853737320948!
</body></html>