在 Firefox 中无法以两行显示的工具提示

我正在添加一个工具提示<br>html 的标签。它在 chrome 中运行良好，但在 firefox 中运行不佳。

My code:

var dot = svg.append("g")
      .attr("class", "dots")
      .selectAll(".dot")
      .data(interpolateData(1))
      .enter().append("circle")
      .attr("class", "dot")

  // Add a title.
  dot.append("title")
     .each(function() {


      var d = d3.select(this);
d3.select(this).select("title")
       .html(function(d,i) { return d.name + ": " + Math.round(Number(d.avg)) + " avg each month <br>" + d.name + ": Build of "  + Math.round(Number(d.Checkin)) + " hrs each month";});

工具提示应该以 2 行显示。它在 Chrome 中工作正常，但在 Firefox 中不行。

The SVG <title>元素在浏览器之间的处理不一致，因为它与 HTML 相比具有相似的功能但规则不同title属性。浏览器似乎有选择性地选择将哪些 HTML 规则应用于 SVG 以及如何应用。

The SVG <title>元件规格 http://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements表明：

• 该标题主要是为了便于访问。

• 浏览器may将标题显示为工具提示。

• The 顶级标题但是，必须在独立的 SVG 文档中显示（通常在标题栏中，与 HTML 相同）<title>元素）。

• 标题may包含来自其他命名空间的内容，具有适当的 XML 命名空间属性，但没有指示在创建工具提示时应如何呈现这些内容。

• 任何不在其他命名空间中的内容大概都应该受到一般的约束SVG 空白处理规则 http://www.w3.org/TR/SVG11/text.html#WhiteSpace，这需要换行符ignored.

The HTML title属性规格 http://www.w3.org/html/wg/drafts/html/CR/dom.html#the-title-attribute表明：

• 标题表示有关该元素的附加“建议信息”。

• 浏览器必须向用户提供标题信息，最好以与设备无关的方式（尽管大多数浏览器仅在悬停时显示）。

• 显示工具提示时必须考虑属性内的换行符。

• 不允许使用其他标记（因为它是属性，而不是 HTML 代码）。

But...

浏览器制造商重复使用显示 HTML 工具提示的代码来显示 SVG 工具提示，因此事情变得混乱。

遵循这个小提琴（记住这适用于 HTML 文档中的内联 SVG）：http://fiddle.jshell.net/5npxba9L/6/ http://fiddle.jshell.net/5npxba9L/6/

• SVG 中的硬换行符和额外空白<title>:

  • are 保留在 Chrome 36、Opera 24 和 Firefox 31 中（即应用 HTML 属性规则）

  • are ignored在 IE 11 中（即应用 SVG 空白规则）

• Markup <br/>SVG 中的元素<title>:

  • 在 Firefox 31 中从工具提示中删除

  • 在 Chrome 36、Opera 24 和 IE 11 中显示为换行符

  • 当使用 XML 命名空间前缀时，在所有浏览器中都被完全忽略（这在 XHTML 文档中可能会有所不同）

• SVG 中的其他标记元素<title>，例如 SVG<tspan>要素：

  • 在 Firefox 31 和 IE 11 中从工具提示中删除

  • 在 Chrome 和 Opera 中显示为纯文本（即打印出尖括号）

• 在所有测试的浏览器中（正确），硬换行符和额外的空格保留在 HTML 标题属性中，并且额外的标记呈现为纯文本

So, the 完全hacky并且不符合规格在内联 SVG 中获取多行工具提示的方法是使用both <br/>标签（未命名空间或默认命名空间发生更改）和硬换行符<title>元素：

<svg>
    <circle cx="250" r="50">
        <title><span xmlns="http://www.w3.org/1999/xhtml">Title with <br/>
a line break</span></title>
    </circle>
</svg>

适用于当前版本的 Chrome、Opera、Firefox 和 IE（尚未在 Safari 或移动设备中进行测试），但基于 webkit 的浏览器会创建额外的空行。

但请注意：您将无法使用 d3 创建上述标记selection.html()大多数浏览器中的方法，因为该函数依赖于HTMLElement.innerHTMLDOM 属性，未在 SVG 元素上定义。您需要创建文本节点和<br>元素分开。最简单的方法是使用虚拟 HTML 元素作为父元素，使用innerHTML属性来创建混合内容，然后将其附加到标题元素：

dot.enter().append("circle")
      .attr("class", "dot")
      .attr("r", "50")
      .attr("cx", function(d,i){return i*100 + 50;})
  .append("title")
  .append(function(d, i){
      //when the parameter to `append()` is a function
      //it will be run for each element in the active selection
      //(in this case, the title elements)
      //and must return the actual element node to append.

      var span = document.createElement("span");
      span.innerHTML = "This is element <br/>\n #" + i;
      //the \n will be converted in Javascript to a line break
      return span;
  });

http://fiddle.jshell.net/cLLsgdmk/ http://fiddle.jshell.net/cLLsgdmk/

这主要是出于好奇。如果您想要更可靠的解决方案，请按照 Lars 的回答获取有关如何创建<foreignObject>工具提示，或查看这个 Codepen 演示 http://codepen.io/AmeliaBR/pen/kFDvH有关如何使用 Javascript 覆盖绝对定位的信息<div>在你的 SVG 之上。