javascript - SVG dx+text-anchor middle 在 chrome 和 firefox 中具有不同的行为

Question

我想编写不依赖于浏览器的代码。我的目标是显示一个圆弧，其中有居中的文本:

为此，我使用 d3.js 绘制圆弧:

var elem = vis.append("svg:path")
    .attr("d", myarc(inR, outR, startA, endA, orient))
    .attr("transform", "translate(200,200)")
    .attr("fill", "rgb(255, 255, 255)")
    .style("stroke-width", 0.2)
    .style("stroke", "#BBB")
    .attr("id", "0_1");

然后我将文本绑定(bind)到它，使其遵循圆弧，然后将其从 y 中圆弧半径的一半移动。 x 方向和 Angular 长度的一半方向:

text.append("text")
    .style("font-size", "14px")
    .style("font-weight", "bold")
    .attr("dx", spaceLength / 2.0)
    .attr("dy", 25)
    .attr("method", "stretch")
    .attr("spacing", "auto")
    .append("textPath")
    .attr("xlink:href", "#0_1")
    .attr("text-anchor", "middle")
    .text("Test text :)");

我的问题是 Chrome 和 Firefox 不会以相同的方式呈现此代码。 dx属性在 Chrome 中向右移动的文本数量是 Firefox 中的两倍。

以下是它在 Firefox 中的呈现方式:

为了使其在 Firefox 中工作，我必须替换:

    .attr("dx", spaceLength / 2.0)

由

    .attr("dx", spaceLength)

如何让这段代码在两个浏览器上显示相同，而不实现浏览器检测功能？

是什么造成了两个浏览器中渲染的差异？

重现该问题的完整代码示例可在此处找到:http://jsfiddle.net/taxQK/1/

非常感谢

Answer 1

文本支持在刚刚发布的 Firefox 25 中被重写，当我在该版本中尝试时，您的示例可以正常工作。您可能需要做的就是更新到最新发布的 Firefox 版本。