2

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

在此处输入图像描述

为此，我使用 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/

非常感谢

4

2 回答 2

2

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

于 2013-11-02T09:54:51.567 回答
1

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

https://github.com/danielstern/MagicCircles

披露：这是我的图书馆。

于 2015-02-18T19:11:15.657 回答