<a> svgのハイパーリンク<use>

Question

EDIT：Firefoxはこれをサポートする唯一のブラウザだと思われます。私は で、Chrome用のソリューションを探しています。

私は、ウェブサイトの複数のページに繰り返されるSVGヘッダを持ってしようとしている、と私は<use>とそれを達成することができますが、問題は、SVG（すなわちロゴ）のハイパーリンクが応答しないということですクリックイベント。

ここに、問題を示す簡略化されたスニペットがあります。インラインハイパーリンクの左側のボックスは正常に動作しますが、<use>タグを使用して含まれている場合は、右側のボックスに示すようにクリックに反応しません。

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

それはここにも利用できます：https://jsfiddle.net/sh8276gu

Answer 1

SVGはXMLベースではなくベースのHTMLですので、あなたは、通常のHTML <a>タグを使用して、代わりに使用してリンクを含めることはできませんXlink。

これは、<use>タグ内で適用したのと同じタイプのリンク方法です。 XLINKを使用して再フォーマットコードは次のようになります

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

あなたはSVG here内のリンクを含む詳細を読むことができます。