<a> Hyperlink in Svg <use>

Question

EDIT: Firefox scheint der einzige Browser zu sein, der dies unterstützt. Ich bin auf der Suche nach einer Lösung für Chrome.

Ich versuche, einen svg-Header zu haben, die auf mehreren Seiten einer Website wiederholt, und ich kann das erreichen mit <use>, aber das Problem ist, dass ein Hyperlink im svg (nämlich das Logo) reagiert nicht um auf Ereignisse zu klicken.

Hier ist ein vereinfachtes Snippet, das das Problem zeigt. Die linke Box mit dem integrierten Hyperlink funktioniert gut, aber wenn sie über das Tag <use> eingefügt wird, reagiert sie nicht auf einen Klick, wie mit der rechten Box zu sehen ist.

<svg width="300" height="100"> 
 
    <svg id="link"> 
 
    <a href="https://google.com"> 
 
     <rect width="100" height="100" /> 
 
    </a> 
 
    </svg> 
 
    <use x="200" xlink:href="#link"></use> 
 
</svg>

Es ist auch hier verfügbar: https://jsfiddle.net/sh8276gu

Answer 1

Da SVG XML basiert und nicht auf Basis HTML, können Sie keine normalen HTML <a>-Tag verwenden und stattdessen umfassen müssen Verbindungen mit Xlink.

Dies ist die gleiche Art von Verknüpfungsmethode, die Sie innerhalb Ihres Tags <use> angewendet haben. Der neu formatiert Code Xlink mit würde wie folgt aussehen:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="100"> 
    <svg id="link"> 
    <a xlink:href="https://google.com"> 
     <rect width="100" height="100" /> 
    </a> 
    </svg> 
    <use x="200" xlink:href="#link"></use> 
</svg> 

Sie können here mehr zu erfahren, wie Links in SVG lesen.