Question

我正在添加一个带有html <br>标记的工具提示。它在chrome中运行良好但在firefox上运行不正常。

我的代码：

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中没有。

Answer 1

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

SVG <title> element specs表示：

标题主要用于辅助功能。
浏览器可能将标题显示为工具提示。
必须显示独立SVG文档中的顶级标题（通常在标题栏中，与HTML <title>元素相同）。< / p>
标题可能包含来自其他名称空间的内容，具有正确的XML名称空间属性，但没有迹象表明在创建工具提示时应如何呈现这些内容。
任何不在另一个名称空间中的内容都应该受到一般SVG whitespace-handling rules的约束，这需要忽略。

。

HTML title attribute specs表示：

标题代表其他＆＃34;咨询信息＆＃34;关于元素。

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

显示工具提示时，必须遵守属性中的换行符。

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

但......

浏览器制造商重复使用代码显示HTML工具提示以显示SVG工具提示，因此事情变得令人困惑。

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

SVG <title>中的硬换行和额外空格：

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

在IE 11中

被忽略（即应用了SVG空白规则）

SVG <br/>中的标记<title>元素：

从Firefox 31

的工具提示中删除

在Chrome 36，Opera 24和IE 11

中显示为换行符当使用XML名称空间前缀时，

在所有浏览器中都被完全忽略（这可能在XHTML文档中有所不同）

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

从Firefox 31和IE 11

的工具提示中删除

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

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

因此，使用两个 <br/>标记完全hacky而不是根据规范方式获取内联SVG中的多行工具提示未命名空间或默认命名空间中的更改）以及<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.innerHTML DOM属性，该属性不是＃39; t在SVG元素上定义。您需要单独创建文本节点和<br>元素。最简单的方法是使用虚拟HTML元素作为父元素，使用innerHTML属性创建混合内容，然后将其附加到title元素：

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＆＃39;回答有关如何创建<foreignObject>工具提示的链接，或查看this Codepen demo以获取有关如何使用Javascript在SVG上覆盖绝对定位的<div>的信息。

Answer 2

您使用的<br>标记在SVG中没有任何意义 - Chrome以您想要的方式解释它的行为违反了标准。要在SVG中获取多行文本，您基本上有两个选项：

使用多个text或tspan元素。
使用foreignObject嵌入HTML并使用例如<br>那里。

this question中的更多信息和指示。

编辑：这些选项不适用于title元素（感谢AmeliaBR指出它）。

工具提示显示在两个不在Firefox中的单独行中

2 个答案: