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");

然后我将文本绑定到它以使其跟随弧，然后将其从y方向的圆弧半径和x方向的角度长度的一半移动：< / p>

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版本。

Answer 2

此库具有在圆形外部旋转文本的实现，可在Firefox，Chrome，Safari和IE中使用。虽然我不建议使用它，但它的源代码应该揭示诀窍。

https://github.com/danielstern/MagicCircles

披露：这是我的图书馆。