javascript - tutorial - svg w3c

El atributo del título no funciona para un SVG Rect en Safari

Question

Tengo un SVG creado con d3 que tiene atributos de título establecidos en todos los rectos para las ventanas emergentes de información sobre herramientas. El código funciona bien en Firefox, pero la información sobre herramientas no se muestra en Safari, ni en Mac ni en Windows. Sé que el atributo de título se está configurando correctamente como lo puedo ver en el inspector web de Safari.

recorte de código 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; });

Fragmento del inspector web que muestra algunos de los html generados:

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

Gracias por cualquier ayuda

Answer 1

Los elementos SVG no tienen un atributo de título. Para obtener el efecto de un atributo de título html, debe agregar un elemento de título secundario, por ejemplo

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