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