在Chrome上过渡后SVG textPath不可见

我认为这是Chrome中的一个错误，因为它似乎在Firefox中正常工作，但我希望有人能推荐一种解决方法（或者告诉我如果这是错误我的错）。在Chrome上过渡后SVG textPath不可见

我试图把标签为弦图的组弧以类似的方式，以这个例子： http://bost.ocks.org/mike/uberdata/：

enter image description here

我使用textPath实现这一目标就像例。我的情况不同的是，我正在运行一个转换，以便在创建弧时打开弧，并在数据更改时调整它们的大小。当我使用textPath引用的path上的转换时，结果是文本不会立即显示在Chrome上。它像预期的那样出现在DOM中，当我做类似调整浏览器的缩放时，文本会弹出到视图中。

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

如果我设置的路径过渡transition.each("end",...)并触摸它使文本显示在textPath的属性。但是，当我调整弧的大小时，这并不能帮助我，在此期间，我希望文本与路径一起浮动。在Firefox上，这种方式可行，但在Chrome浏览器上，文本仍然保持原样。

任何想法如何让这个工作？

来源

2012-07-20 Scott Cameron

它似乎适用于我在Chrome 21.0.1180.49测试版。你在稳定吗？ – 2012-07-20 07:48:25

是的，现在我正在使用20.0.1132.57。这很好，这听起来像是一个已知的问题。我想在此期间，我可以淡入淡出文本，而不是将它与路径一起移动。除非有人知道强制重新计算的方法。 – 2012-07-20 15:03:51

我分叉和固定在这里你的例子：

http://bl.ocks.org/3151228

你已经引发了WebKit浏览器两个错误：

您不能选择textPath元素因为WebKit如何处理区分大小写的元素名称。见bug 83438。不幸的是，WebKit显示没有修复这个bug的迹象。
更新一个路径元素本身不会触发重绘在引用此路径的相关元素上。所以，即使我们更新了路径，引用的textPath元素也不会被重绘。为了解决这个更新错误，我们创建一个自定义转换，将textPath的xlink：href属性重复设置为“#path”。我不确定是否已经为此提交了一个错误。

注意：文字在动画开始处的圆弧开始处被缩小，使得难以阅读。根据您要完成的内容，您可以改为use the arc to clip the text，以便在弧扩展时显示文本。

来源

2012-07-20 15:20:56 mbostock

感谢您的出色答案。你真棒。对于输入转换，我完全同意clipPath看起来好多了。但是我仍然需要处理弧更改大小和文本需要与路径的新开始位置对齐的更新转换。所以自定义补间来锤击它是！（至少为了更新）。（顺便说一句，我没有选择textPath，因为我记得你在之前提醒过我......有时候我会注意的:)） – 2012-07-20 17:30:41

在Chrome上过渡后SVG textPath不可见

回答

相关问题