SVG <title> 元素在浏览器之间的处理方式不一致，因为它与 HTML 的 title 属性相比具有相似的功能但不同的规则。浏览器似乎会选择性地选择将哪些 HTML 规则应用于 SVG 以及如何应用。
SVG <title> element specs 表示：
标题主要是为了便于访问。
浏览器可能将标题显示为工具提示。
必须显示独立 SVG 文档中的 顶级标题（通常在标题栏中，与 HTML <title> 元素相同）。
标题可能包含来自其他命名空间的内容，具有适当的 XML 命名空间属性，但没有说明在创建工具提示时应该如何呈现这些内容。
任何不在另一个命名空间中的内容大概都应该服从一般的SVG whitespace-handling rules，这需要忽略换行。
HTML title attribute specs 表示：
但是……
浏览器制造商重复使用显示 HTML 工具提示的代码来显示 SVG 工具提示，因此事情变得混乱。
跟随这个小提琴（记住这适用于 HTML 文档中的内联 SVG）：http://fiddle.jshell.net/5npxba9L/6/
-
SVG <title> 中的硬换行符和额外空格：
-
在 SVG <title> 中标记 <br/> 元素：
-
SVG <title> 中的其他标记元素，例如 SVG <tspan> 元素：
在所有经过测试的浏览器中（正确）
所以，完全不符合规范的方法是使用 both <br/> 标签（un-命名空间或更改默认命名空间）和<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() 方法创建上述标记，因为该函数依赖于未在 SVG 元素上定义的 HTMLElement.innerHTML DOM 属性.您需要分别创建文本节点和 <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/
这主要是出于好奇。如果您想要更可靠的解决方案，请按照 Lars 的回答获取如何创建 <foreignObject> 工具提示的链接，或查看 this Codepen demo 了解有关如何使用 Javascript 在您的顶部覆盖绝对定位的 <div> 的信息SVG。