标题属性不适用于Safari上的SVG Rect
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了标题属性不适用于Safari上的SVG Rect相关的知识，希望对你有一定的参考价值。
我有一个用d3创建的SVG，它在工具提示弹出窗口的所有rects上都设置了title属性。该代码在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>
谢谢你的帮助
答案
SVG元素没有title属性。要获得html 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>以上是关于标题属性不适用于Safari上的SVG Rect的主要内容，如果未能解决你的问题，请参考以下文章
Safari：<label> 元素中的 SVG 似乎不适用于“点击”事件
Angularjs 计算不适用于 iPad / iPhone 上的 safari