Question

我有一个用d3创建的SVG，它在工具提示弹出窗口的所有rects上设置了title属性。该代码在Firefox中运行良好，但工具提示不会出现在Safari中 - 无论是Mac还是Windows。我知道title属性正确设置，因为我可以在Safari Web Inspector中看到它。

d3 code snip：

.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元素没有title属性。要获得html title属性的效果，您需要添加子标题元素，例如

＆＃13;

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

＆＃13;

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

1 个答案: