Question

我正在尝试添加多行工具提示并遇到一些问题，主要是通过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仍然忽略它。对此没有简单的解决方案吗？

Answer 1

这是IE11友好的解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

有两个细微之处：

Chrome会在<tspan>元素周围呈现空白，因此不应缩进;
IE11使用<tspan>呈现连续的display:block元素，双行间距（我无法找到一个CSS技巧来避免这种情况），所以样式应用于每隔一个< / em> element。

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

请注意，虽然文本内容元素确实尊重display property，但工具提示的显示完全取决于浏览器，因此此技术将来可能无效。

...＆＃39;降序＆＃39;和＆＃39; title＆＃39;元素不会呈现为图形的一部分。用户代理可能，但是，例如，显示＆＃39;标题＆＃39;元素作为工具提示，因为指针设备在特定元素上移动。

_{（强调我的）}

来源：SVG spec, desc and title elements。

Answer 2

对于IE10-它适用于SVG中的HTML对象（可能有点过分）。似乎也适用于所有其他浏览器（FF似乎有BR标签的问题，如果使用2个DIV标签，IE将插入额外的行，因此使用两个foreignObjects可能是最安全的选择）。

<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title>This is line 1
This is still line 1 in IE
<foreignObject class="node"><div>This is line 2 in IE!<br/>And this is line 3</div></foreignObject>
</title>
    </rect>
  </svg>

PS：我知道这篇文章相当陈旧，但也许有人仍然需要它（我碰巧需要它用于SharePoint 2013页面，由于兼容性元标记，不幸的是在IE10模式下运行）。

用于SVG元素的D3多行工具提示

2 个答案: