I have a bit of code like this:
svg {font-family:Verdana,sans-serif;color:#000;}
.key {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270) blue */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150) green */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30) red */
.yel {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non {fill:none;}
.rec {stroke:#000;stroke-width:1;}
<svg class="key" x="631.5" y="253.5" width="69" height="69">
<rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
<text class="caphgh" x="2.5" y="16.5">K</text>
<text class="keynor" x="2.5" y="22.5">
<tspan x="2.5" dy="14">Next</tspan>
<tspan x="2.5" dy="14">Near</tspan>
<tspan x="2.5" dy="14">Friend</tspan>
</text>
<text class="keysub" y="0.5">
<tspan class="keyshf" x="68.5" dy="12">Base</tspan>
<tspan class="keyctl" x="68.5" dy="12">Plant</tspan>
<tspan class="keyalt" x="68.5" dy="12">Jump</tspan>
</text>
</svg>
The problem is with the last three tspans. They are all right-aligned, but in Chrome and Firefox the last of the three is closer to the right edge than the first two. In IE 11 this does not happen.
Can anyone tell me what the cause might be? Here is a screenshot:
Thanks!
This is caused by the whitespace in your XML between the
<tspan>
elements. If we remove that, your problem disappears.It may be a little unintuitive, but when you set
text-anchor: end
in the<tspan>
elements, it covers all the text up until you change the text position. That happens at the next<tspan>
element, when you changex
anddy
. So that extra space in between the spans becomes part of the previous<tspan>
. So your first line of text is actually:That's why that text appears to be shifted left by a space.
Note that the default whitespace behaviour in SVG documents is to collapse consecutive spaces down to a single space.
You don't really need to be using
<tspan>
in your example. It would be simpler and cleaner just to use<text>
elements.