Атрибут заголовка не работает для SVG Rect на Safari

У меня есть SVG, созданный с d3, который имеет атрибуты заголовка, установленные во всех прямоугольниках для всплывающих подсказок всплывающих подсказок. Код отлично работает в 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; });

Снимок из веб-инспектора, показывающий некоторые из сгенерированных 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>

Спасибо за любую помощь

Ответы

Ответ 1

Элементы SVG не имеют атрибута title. Чтобы получить эффект атрибута заголовка html, вам нужно добавить элемент элемента заголовка, например.

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