CODEWITHSUNDEEP
htmlsvghyperlink
MSbitani
MSbitani

Reputation: 11

<a> hyperlink in svg <use>

EDIT: Firefox seems to be the only browser that supports this. I'm looking for a solution for Chrome.

I'm trying to have a svg header that repeats on multiple pages of a website, and I can achieve that with <use>, but the problem is that a hyperlink in the svg (namely the logo) does not respond to click events.

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 <use> tag, it doesn't respond to a click, as can be seen with the right box.

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

It's also available here: https://jsfiddle.net/sh8276gu

Upvotes: 1

Views: 3297

Answers (1)

Dylan Stark
Dylan Stark

Reputation: 2395

Because SVG is XML based and not HTML based, you can't use a normal HTML <a> tag and instead have to include links using Xlink.

This is the same type of linking method you applied within your <use> tag. The reformatted code using Xlink would look like this:

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

You can read more about including links in SVG here.

Upvotes: 1

Related Questions