Internet Explorer does not display svg text correctly when using text-anchor and textLength attributes
I noticed that the below web page does not display correctly in IE 11. It works fine in Google Chrome.
The text elements in the example below, marked with "text-anchor: end", are not anchored properly to the end of the text in IE.
It looks like combing the text-anchor: end attribute with the textLength attribute is causing the problem. When the textLength attribute is removed, it behaves as expected.
I could not find information on this issue on the internet. Is this a known bug? Is there work around?
Any help is greatly appreciated!
<svg height="1000" width="1150">
<text text-anchor="start" textLength="200px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="80">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<text text-anchor="end" textLength="200px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="100">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<text text-anchor="start" textLength="300px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="150">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<text text-anchor="end" textLength="300px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="170">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<text text-anchor="start" textLength="500px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="220">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
<text text-anchor="end" textLength="500px" lengthAdjust="spacingAndGlyphs" font-family="Lucida Console" font-size="15" x="600" y="240">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
</svg>
source to share
The workaround is not to use text-anchor: end (or middle), just text-anchor: start. Only you need to calculate the starting position, which is pretty straightforward since you know the exact length of the displayed text (you just set it using the textLength property), so the new x value will be (old x - textLength) if you planned on using text-anchor: end or (old x - textLength / 2) in case of text anchor: middle.
source to share
As a job, rather than relying on the textLength and lengthAdjust attributes to set font spacing and glyph size, I determine the font based on the actual line length (in pixels) and the size of the available space (in pixels). Below is the code I used. Notice I'm using d3.js.
var lTitleWidth = title[0][0].getBBox().width;
if (lTitleWidth > lMaxTitleWidth) {
var lFactor = lMaxTitleWidth / lTitleWidth;
title.attr({ "font-size": parseInt(title.attr("font-size")) * lFactor });
}
This workaround does not provide the same behavior. Since the font size is now smaller, the font height is also reduced, which would not be the case if IE worked as it should.
source to share