<Text> tag in svg not rendering correctly in chrome

Question

Background

1. The application UI is built in icefaces

2. As iceface works, a piece of javascript code is retrieved from the server, this code is run on the browser to update the svg element.Hence, svg is rendered dynamically for the 1st time

Problem

Issue is with the <text> tag in the svg not rendering properly. The <text> tag does not follow the positions x,y as mentioned in its attributes. Instead it just stays at the origin(0, 0) because of which each of the text within different <text> tag overlaps over each other.

First rendering looks like this

However, the text gets positioned correctly automatically in the following cases:-

1. The size of the browser window is changed
2. Any of the elements in the <svg> tag is altered via the developer tool

From the above 2 points it appears that the svg itself is not rendered properly at the first load(dynamically). As soon as we do any of above 2 points chrome renders the svg correctly.

Resizing windows/Altering any svg element in developer tool automatically fixes it to this

Queries

1. Is there a way to force reload svg in chrome?
2. What could be an alternative to using <text> tag for positioning text in the svg?
3. Any other solutions?

NOTE:-The same scenario works perfectly in Firefox !

Although the full svg code is quite big but here is the HTML piece responsible for rendering the svg text

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="100%" minwidth="1" width="100%" x="0" y="0">
    <g transform="matrix(57.22751322751323,0,0,57.22751322751323,360.6538835978836,26.883768888888916)">
        <g>
            <text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black;" transform="scale(0.048895)" x="-10.779220779220779" y="2.1136363636363633">
                <tspan x="-10.779220779220779">Overlapping text</tspan>
                <tspan dy="1em" x="-10.779220779220779">Overlapping text</tspan>
            </text>
            <text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black; font-weight:bold;" transform="scale(0.08001)" x="-6.587301587301588" y="-0.75">
                <tspan x="-6.587301587301588">Overlapping text</tspan>
            </text>
        </g>
    </g>
</svg>

Answer 1

I had the same issue. I think it's an issue with chrome (or chromium for Linux).

Just as a quick fix to get it working. My solution used Inkscape.

• First, make whatever SVG you want with Inkscape with the centered text.
• Then with the text selected press Ctrl + Shift + C. This will convert it from text to a path object sort of bypassing the chrome issue.

Not the best fix, I know but it works. Just a way to get it to work till it's fixed.

Answer 2

I also got this issue. But seems like this is due to the late loading of font used for text.

You can also try using two below properties:

1. textLength

2. lengthAdjust