在Chrome上转换后，SVG textPath不可见

Question

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

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

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

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

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

有关如何使其发挥作用的任何想法？

Answer 1

我在这里分叉并修复了你的例子：

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

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

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

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

注意：文本在动画开头的圆弧开始处被碾碎，使其难以阅读。根据您要完成的任务，您可以改为use the arc to clip the text，以便在弧展开时显示文本。