google-chrome - 在 Chrome 上转换后 SVG textPath 不可见

Question

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

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



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

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

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

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

Answer 1

我在这里 fork 并修复了您的示例:

http://bl.ocks.org/3151228

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

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

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

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