hyperlink in svg

Question

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

I tested in Chrome 55, Edge 40, and IE 11 on Win10 as well as Chrome 55 on Android 7.1.1 @RobertLongson — MSbitani, Feb 01 '17 at 15:09
As far as I can see this works OK on Firefox 51, if that's not the case for you then please explain more clearly what you expect to happen that isn't happening now. — Robert Longson, Feb 01 '17 at 15:11
It does seem that Firefox is the only one that supports this. I'll edit the question to include that I'd like it to work with Chrome @RobertLongson. — MSbitani, Feb 01 '17 at 15:45

score 1 · Answer 1 · answered Feb 01 '17 at 05:25

1

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.

answered Feb 01 '17 at 05:25

Dylan Stark

2,325
17
24

The OPs code works on Firefox 51, I haven't tested it elsewhere but presumably he's on some UA that does not yet support href (or that has buggy support for href). – Robert Longson Feb 01 '17 at 09:19
This is an old standard that is not recommended for use according to [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href). Out of curiosity I tried it anyway, and it still doesn't work. Did it work for you? – MSbitani Feb 01 '17 at 15:14
MDN is rather cutting edge on that, xlink:href is still required on Safari for instance so I'd suggest that it really is recommended for use and that MDN is a bit ahead of where it should be. – Robert Longson Feb 01 '17 at 16:00
I'll include `xlink:href` for broader support, but unfortunately it does not solve my `` problem. – MSbitani Feb 01 '17 at 16:35
If this isn't solving your problem my guess is that it might have something to do with event bubbling inside the `` tag. Take a look at the solution that people reached [here](http://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element) and try utilizing `pointer-events: none;` on your SVG item. It looks like in some browsers including SVG items via `` prevents them from bubbling up to parent elements. – Dylan Stark Feb 01 '17 at 18:46
I agree it seems to have something with event bubbling, but I can't figure out what is capturing the click @DylanStark. I've tried `style="pointer-events: none;"` on every element, and all I've been able to do is make neither version clickable. What makes my scenario different than others that I've found is that the link I want triggered is generated from within the ``, rather than wrapping it. – MSbitani Feb 03 '17 at 01:28

hyperlink in svg

1 Answers1