d3 force network graph text on links displays in firefox but not google chrome. any idea why?

Question

https://jsfiddle.net/ejy7n9wa/

The above is a working jsfiddle. Visit it in chrome, then visit in firefox. Works in firefox, doesn't work in Google Chrome. Can someone help me get it to work on chrome?

Relevant code:

var link = svg.selectAll("line.link")
        .data(json.links)
        .enter().append("svg:line")
        .attr("class", "link")
        .attr("id", function(d, i){
            return "linkId_" + i;
        })
        .style('stroke', '#333')
        .attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });

    var labelText = svg.selectAll(".labelText")
        .data(force.links())
        .enter().append("text")
        .attr("class","labelText")
        .attr("dx",20)
        .attr("dy",0)
        .style("fill","red")
        .append("textPath")
        .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
        .text(function(d,i) { return "text for link " + i;});