Tytuł Atrybut nie działa dla SVG Rect na Safari

Question

Mam SVG utworzone z d3, który ma atrybuty tytułu ustawione na wszystkich rects dla popup podręcznych z podpowiedziami. Kod działa poprawnie w Firefoksie, ale podpowiedzi nie pojawiają się w Safari - ani na Macu ani w Windows. Wiem, że atrybut title jest poprawnie ustawiony, ponieważ widzę go w Safari Web Inspector.

kod

d3 ciach:

.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; }); 

Fragment od inspektora internetowej pokazano niektóre z wygenerowanym 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> 

dzięki za pomoc

Answer 1

elementy SVG nie mają atrybutu title . Aby uzyskać efekt atrybutu tytułu html, musisz dodać element tytułu podrzędnego, np.

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