title: <a> hyperlink in svg <use>
body: <blockquote>
    <p>EDIT: Firefox seems to be the only browser that supports this. I'm
    looking for a solution for Chrome.</p>
  </blockquote>
  
  <p>I'm trying to have a svg header that repeats on multiple pages of a website, and I can achieve that with <code>&lt;use&gt;</code>, but the problem is that a hyperlink in the svg (namely the logo) does not respond to click events.</p>
  
  <p>Here is a simplified snippet that shows the problem. The left box with the inline hyperlink works fine, but when it is included via the <code>&lt;use&gt;</code> tag, it doesn't respond to a click, as can be seen with the right box.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="300" height="100"&gt;
    &lt;svg id="link"&gt;
      &lt;a href="https://google.com"&gt;
        &lt;rect width="100" height="100" /&gt;
      &lt;/a&gt;
    &lt;/svg&gt;
    &lt;use x="200" xlink:href="#link"&gt;&lt;/use&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's also available here: <a href="https://jsfiddle.net/sh8276gu" rel="nofollow noreferrer">https://jsfiddle.net/sh8276gu</a></p>