在 Chrome 上转换后 SVG textPath 不可见

Question

我认为这是 Chrome 中的一个错误，因为它似乎在 Firefox 中运行良好，但我希望有人可以推荐一个解决方法（或者如果这是我的错，请告诉我哪里出错了）。

我正在尝试以与此示例类似的方式将标签放入和弦图的组弧中： http://bost.ocks.org/mike/uberdata/：

我正在使用textPath 来实现这一点，就像示例一样。我的情况的不同之处在于，我正在运行转换以在创建弧时打开弧，并在数据更改时调整它们的大小。当我在textPath 引用的path 上使用过渡时，结果是文本不会立即显示在Chrome 上。它按预期存在于 DOM 中，当我执行诸如调整浏览器缩放之类的操作时，文本会弹出。

以下是一些显示问题的示例代码： http://bl.ocks.org/3148920

如果我在路径转换上设置transition.each("end",...) 并触摸 textPath 上的属性，它会使文本出现。但是，当我调整弧线的大小时，这对我没有帮助，在此期间我希望文本与路径一起浮动。在 Firefox 上这是可行的，但在 Chrome 上，文本会保持不变。

关于如何让它发挥作用的任何想法？

Answer 1

我已经在此处分叉并修复了您的示例：

• http://bl.ocks.org/3151228

您在 WebKit 浏览器中触发了两个错误：

• 您无法选择 textPath 元素，因为 WebKit 处理区分大小写的元素名称的方式存在错误。见bug 83438。不幸的是，WebKit 没有显示修复此错误的迹象。

• 单独更新路径元素不会触发对引用此路径的依赖元素的重绘。因此，即使我们更新了路径，引用的 textPath 元素也不会被重绘。为了解决这个更新错误，我们创建了一个自定义转换，重复将 textPath 的 xlink:href 属性设置为“#path”。我不确定是否已经为此提交了错误。

注意：文本在动画开始的弧线开始处被卷曲，难以阅读。根据您要完成的任务，您可能会改为 use the arc to clip the text，以便随着弧的扩展显示文本。