在 Chrome 上转换后 SVG textPath 不可见

Posted 2023-02-23

【中文标题】在 Chrome 上转换后 SVG textPath 不可见

【英文标题】：SVG textPath not visible after transition on Chrome

【发布时间】：2012-07-19 09:30:47

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

它在 Chrome 21.0.1180.49 beta 中似乎对我有用。你稳定吗？

是的，现在我使用的是 20.0.1132.57。很好，这听起来像是一个已知问题。我想同时我可以淡入淡出文本，而不是随路径移动它。除非有人知道强制它重新计算的方法。

【参考方案1】：

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

http://bl.ocks.org/3151228

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

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

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

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

【讨论】：

感谢您的出色回答。你真棒。对于进入过渡，我完全同意 clipPath 看起来要好得多。但是我仍然需要处理圆弧改变大小并且文本需要与路径的新起始位置对齐的更新过渡。所以自定义补间来锤击它的href！ （至少用于更新）。 （顺便说一句，我没有选择 textPath 是因为我记得你之前警告过我这件事......看，我有时会注意。:)）