javascript - 标题属性不适用于 Safari 上的 SVG Rect

Question

我有一个用 d3 创建的 SVG，它在工具提示弹出窗口的所有矩形上都设置了标题属性。该代码在 Firefox 中运行良好，但工具提示不会在 Safari 中显示——无论是 Mac 还是 Windows。我知道 title 属性设置正确，正如我在 Safari Web Inspector 中看到的那样。

d3 代码片段:

.append("rect")
.attr("class", "hmCell")
.attr("x", function(d,i) {
    return cellWidth*i;
})
.attr("y", 0 )          
.attr("width", cellWidth-cellPadding )
.attr("height", cellHeight-cellPadding )    
.style("fill", function(d,i){
        return colorScales[i](d);
})
.attr("title", function(d,i) { return coldata[i]['PrintName']+": "+d; });

来自 Web 检查器的片段显示了一些生成的 html:

<rect class="hmCell" x="0" y="0" width="34" height="11" style="fill: #9fee49; " title="V1: Derek"></rect>
<rect class="hmCell" x="35" y="0" width="34" height="11" style="fill: #ee99bb; " title="V2: Blue"></rect>

感谢您的帮助

Answer 1

SVG 元素没有标题属性。要获得 html title 属性的效果，您需要添加一个子 title 元素，例如

    <svg viewBox="0 0 50 50">
        <rect class="hmCell" x="0" y="0" width="34" height="11" style="fill: #9fee49; ">
            <title>V1: Derek</title>
        </rect>
    </svg>