svg - 在Firefox，IE中d3上的提示工具提示定位

Question

我正在绘制d3 线图和附在圆圈上的醉酒工具提示。

工具提示在 Chrome/Safari 中运行良好，但在 Firefox 和 IE 中，当您将鼠标悬停在某个点上时，虽然确实出现了相应的工具提示，但它显示在屏幕左上角的图形/SVG 元素之外（html 元素）的旁边。

这就是我附加工具提示的方式：

    jQuery('g circle').tipsy({
        gravity: 'w', 
        html: true,
        title: function() {
            return this.textContent;
        }
    })

任何关于我做错了什么的建议将不胜感激。

Answer 1

该补丁为 Tipsy 添加了适当的 SVG 支持。

Answer 2

Tipsy 在元素上使用 offsetWidth 和 offsetHeight。它假设这样的事情适用于 SVG 元素，不幸的是，这种假设在 Chrome/Safari 之外是不正确的。

CSSOM规范说 offsetWidth/offsetHeight 是 html 元素属性。似乎 Chrome/Safari 已将这些放在其 SVG 元素上，但没有规范说明应该如此。

您要么需要修复醉醺醺的跨浏览器，要么让作者去做。使用 getTransformToElement 和/或 getBBox 可能是需要的。