SVG dx+text-anchor 中间对 chrome 和 firefox 有不同的行为答案

【问题标题】：SVG dx+text-anchor middle have different behavior into chrome and firefoxSVG dx+text-anchor 中间对 chrome 和 firefox 有不同的行为
【发布时间】：2013-11-13 11:16:21
【问题描述】：

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

为此，我使用 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方向的角度长度的一半移动：

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/

非常感谢

【问题讨论】：

我认为你应该可以使用.attr("startOffset", "50%") 而不是dx。

标签： javascript google-chrome firefox svg d3.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

这个库有在 Firefox、Chrome、Safari 和 IE 中工作的圆形外部旋转文本的实现。虽然我不推荐使用它，但它的源代码应该可以揭示其中的诀窍。

https://github.com/danielstern/MagicCircles

披露：这是我的图书馆。

【讨论】：