Google chrome 在Chrome上转换后SVG文本路径不可见

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

我试图以与本例类似的方式将标签放入弦图的组弧中： :

我使用

textPath

来实现这一点，就像示例一样。我的例子中的不同之处在于，我正在运行一个转换，以便在创建圆弧时打开它们，并在数据更改时调整它们的大小。当我在

textPath

引用的

path

上使用转换时，结果是文本不会立即显示在Chrome上。它如预期的那样出现在DOM中，当我执行诸如调整浏览器缩放之类的操作时，文本会弹出到视图中

下面是一些显示问题的示例代码：

如果我在路径转换上设置了一个

transition.each（“end”，…）

，然后触摸文本路径上的一个属性，它会使文本出现。但是，当我调整弧的大小时，这对我没有帮助，在此期间，我希望文本与路径一起浮动。在Firefox上，这是可行的，但在Chrome上，文本保持不变

---

有什么办法可以让它发挥作用吗？

我已经在这里介绍并修复了您的示例：

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

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

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

---

注意：在动画开始时，文本在弧的开始处被卷起，使其难以阅读。根据您试图实现的目标，您可能会改为，以便在弧扩展时显示文本。

在Chrome 21.0.1180.49 beta版中，这似乎对我有用。你在马厩里吗？是的，现在我用的是20.0.1132.57。听起来这是一个众所周知的问题，这很好。我想在此期间，我可以淡入淡出文本，而不是将其与路径一起移动。除非有人知道强迫它重新计算的方法。谢谢你的回答。你真棒。对于enter过渡，我完全同意clipPath看起来更好。但我仍然需要处理更新转换，其中圆弧改变大小，文本需要与路径的新开始位置对齐。所以定制tween来锤击href它是！（至少用于更新）。（顺便说一句，我没有选择textPath，因为我记得你之前警告过我这一点……看，我有时确实很注意。：）