SVG textPath not visible after transition on Chrome

Question

I think this is a bug in Chrome because it seems to work fine in Firefox, but I was hoping somebody could recommend a workaround (or tell me where I'm going wrong if this is my fault).

I'm trying to put labels into the group arcs of a chord diagram in a similar fashion to this example: http://bost.ocks.org/mike/uberdata/ :

I'm using textPath to achieve this just like the example. The difference in my case is that I'm running a transition to open the arcs when they are created and also to resize them when the data changes. When I use a transition on the path referenced by textPath, the result is that the text doesn't show up immediately on Chrome. It is present in the DOM as expected and when I do something like adjust the browser zoom the text pops into view.

Here's some sample code that shows the issue: http://bl.ocks.org/3148920

If I set up a transition.each("end",...) on the path transition and touch an attribute on the textPath it makes the text appear. But this doesn't help me when I'm resizing the arc, during which time I want the text to float in conjunction with the path. On Firefox this works, but on Chrome the text just stays put.

Any ideas for how to get this to work?

Answer 1

I’ve forked and fixed your example here:

• http://bl.ocks.org/3151228

You have triggered two bugs in WebKit browsers:

• You can’t select textPath elements because of a bug in how WebKit handles case-sensitive element names. See bug 83438. WebKit shows no sign of fixing this bug, unfortunately.

• Updating a path element by itself does not trigger redraw on dependent elements that reference this path. So, even though we update the path, the referencing textPath element will not be redrawn. To workaround this update bug, we create a custom transition that repeatedly sets the textPath’s xlink:href attribute to “#path”. I’m not sure if there’s already a bug filed for this.

Note: the text is scrunched up at the beginning of the arc at the beginning of the animation, making it hard to read. Depending on what you are trying to accomplish, you might instead use the arc to clip the text, so that the text is revealed as the arc expands.