javascript - firefox 中 tipsy、svg 和 css 的解决方法？

Question

我有 svg 元素的微弱工具提示(使用 d3 生成)。我无法让它们显示在 Firefox 的光标旁边，所以我关注了 the patch链接到此答案 Tipsy tooltip positioning on d3 in firefox, IE这解决了大部分问题。

但是，我使用此 CSS 规则在某些 SVG 元素周围创建环:

.t {
    cursor: default;
    stroke: #000000 !important;
    stroke-opacity: 0.7;
    stroke-width: 7px;
}

对于这些元素，在 FF28 中，tipsy 将工具提示设置在元素的左上角:

是否有(适度无痛的)解决方法？修改tipsy的方法？或者我可以使用不同的 CSS 来获得相同的效果？

Answer 1

SVG 有许多与 html 相同的属性，这常常使它看起来像是交叉兼容的，但正如我通过艰难的方式学到的那样；你会走得很远，然后被踢疯了，因为看起来简单的东西根本不起作用:-)

patch you mentioned似乎使用了“getBBox().width”，这看起来是一个明智的添加，但最初在查看 tipsy 时它没有提到官方 SVG 支持。

所以首先，我会说你应该使用官方支持的工具提示插件。

然而...

我看到那个补丁的原作者did a pull request它没有被拉入主元素，而是被拉入 another person's fork .

问题有评论:

"...we should pull it into our version since we're mostly using tipsy on SVG anyway."

所以也许使用this version of tipsy by enjalot instead听起来好像 svg 支持对他们很重要。