在 GWT 中动态添加时，使用标题在 SVG object 上显示工具提示不起作用

Question

我正在使用 GWT 2.6.1（+ GWT 图形）并尝试绘制 SVG objects 并在每个上显示工具提示，如下所示：

Point point = new Point(100, 100);
Circle reading = new Circle(point.getX(), point.getY(), 3);
reading.setFillColor("#000");
final String infoTip = "120 bpm";
Element titleElement = DOM.createElement("title");
titleElement.setInnerText(infoTip);
reading.getElement().appendChild(titleElement);

现在虽然 SVG 圆绘制正确，但工具提示不起作用。我尝试将生成的 html 粘贴到静态 html 文件中并且效果很好，所以这与将标题元素动态添加到圆圈有关我猜但不知道如何解决它.

我尝试在延迟操作中添加标题元素：

Scheduler.Get().ScheduleDeferred(...)

并且我已经尝试将其添加到 onLoad 中：

    Event.sinkEvents(reading.getElement(), Event.ONLOAD);
    Event.setEventListener(reading.getElement(), new EventListener(){});

但运气不好。

Answer 1

DOM.createElement() 将在 HTML 命名空间中创建元素。您的 <title> 元素需要位于 SVG 命名空间中。

您将需要使用本机 JS DOM 方法来执行此操作。请参阅 Jared Garst 对其他问题的回答：

Using SVG in GWT

在 GWT 中动态添加时，使用标题在 SVG object 上显示工具提示不起作用

Using title to display tooltip on SVG object doesn't work when added dynamically in GWT

javascript

dom

gwt

svg

tooltip