SVG 元素的 D3 多行工具提示

我正在尝试添加多行工具提示，但遇到了一些问题，主要是 Internet Explorer 处理它们的方式。我实际上可以让我的 html 看起来正确呈现，但 IE 会忽略工具提示中的换行符并将其全部放在同一行上。 以下是我尝试过的一些片段（不是确切的代码，我的开发站位于封闭网络上，因此请忽略丢失的不相关信息，例如位置等）

var bars = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.append("title").text(function(d){ return "Line One X:" + d.x + "\nLine Two Y:" + d.y});

这看起来几乎是最好的解决方案，并且将 HTML 呈现为如下所示

<title>
Line One X: 25
Line Two Y: 30
</title>

Firefox 可以将其视为两行，但 IE 会忽略换行符并将它们放在同一行上。 我尝试过很多变体。如果我使用 rect 元素的 title 属性，FF 渲染它就很好，IE 完全忽略它并且不会显示工具提示。 我什至强制 rect 下的 title 元素具有 tspans 和像这样的 br （删除上面最后一个附加标题）

var barsTitle = bars.append("title");
barsTitle.append("tspan").text(function(d){ return "Line One X:" + d.x});
barsTitle.append("br");
barsTitle.append("tspan").text(function(d){ return "Line Two Y:" + d.y});    

它呈现出我认为正确的 HTML

<title>
<tspan>Line One X: 25</tspan>
<br></br>
<tspan>Line Two Y: 30</tspan>
</title>

这里，IE 再次完全忽略 br，即使我将第 2 行插入 br（在 br 打开和关闭标记之间）IE 仍然忽略它。 难道就没有简单的解决办法吗？

这是一个对 IE11 友好的解决方案：

tspan:nth-child(2n) {
  display: block;
}

<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title><tspan>This is line 1</tspan>
<tspan>This is line 2</tspan>
<tspan>This is line 3</tspan>
<tspan>This is line 4</tspan></title>
    </rect>
  </svg>

有两个微妙之处：

1. Chrome 渲染周围的空白<tspan>元素，因此不应缩进；
2. IE11连续渲染<tspan>元素与display:block双行间距（我找不到 CSS 技巧来避免这种情况），因此该样式应用于所有其他元素。

此版本在 Chrome 41、Safari 8、Firefox 37 (OSX Yosemite) 和 IE11 (Windows 7) 上呈现为四行。不幸的是，它在 IE9-10 中仍然呈现为单行。如果您需要在这里多行显示，我建议您自己的<title>基于鼠标事件的渲染。

请注意，虽然文本内容元素确实尊重display财产，工具提示的呈现完全由浏览器决定，因此这种技术将来可能行不通。

...“desc”和“title”元素不会呈现为图形的一部分。用户代理may然而，例如，当定点设备在特定元素上移动时，将“标题”元素显示为工具提示。

_{(emphasis mine)}

Source: SVG 规范，desc and title元素.