Titel Attribut Wrapperelement wird durch Titel Attribut von SVG außer Kraft gesetzt werden

Question

Ich habe einige HTML etwa so:

<a title="Close"> 
    <svg role="img" class="icon"> 
     <title>Close</title> 
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/sprites.svg#close-small-icon"> 
      <svg id="close-small-icon" viewBox="0 0 9 9" width="100%" height="100%"> 
       <title>ic-close small</title> 
       ... 
      </svg> 
     </use> 
    </svg> 
</a> 

möchte ich die Tool-Tip ‚Schließen‘ zeigen. In Chrome wird es derzeit jedoch als "ic-close small" angezeigt. Warum ist das möglich und gibt es eine Möglichkeit, dies ohne das Entfernen des inneren SVG-Title-Tags zum Laufen zu bringen?

Answer 1

<use> hat keine untergeordneten Elemente. Soll Ihr Code-Snippet anzeigen, dass der innere <svg> von der <use> referenziert wird?

Sie sollten die <title> Popup von pointer-events="none" auf die innere SVG deaktivieren können. Aber ich denke, das ist keine Lösung für Sie, weil es klingt wie Sie nicht in der Lage sind, eine derartige SVG zu modifizieren (?)

<a title="Close"> 
 
    <svg role="img" class="icon"> 
 
     <title>Close</title> 
 
     <svg id="close-small-icon" viewBox="0 0 9 9" 
 
      width="100%" height="100%" 
 
      pointer-events="none"> 
 
      <title>ic-close small</title> 
 
      <circle cx="4.5" cy="4.5" r="4" fill="red"/> 
 
     </svg> 
 
    </svg> 
 
</a>