CODEWITHSUNDEEP
svg
user1480951
user1480951

Reputation: 143

SVG xlink:href not working in Chrome

I'm new to SVG. I'm trying to put a SVG file with linkable regions (like an image map) on my page and make it responsive. The SVG displays, but the linkable areas aren't working in Chrome. Works fine in FF, IE11, and Edge.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 880 371" style="enable-background:new 0 0 880 371;" xml:space="preserve">
  <g id="Background_xA0_Image_1_">
    <image style="overflow:visible;" width="880" height="371" id="Background_xA0_Image" xlink:href="data:image/jpeg;... />
    </image>
  </g>
  <g id="Layer_2_xA0_Image_1_">
    <a id="Layer_2_xA0_Image" xlink:href="http://www.example.com"  transform="matrix(1 0 0 1 572 215)">
    <image style="overflow:visible;" width="195" height="42" xlink:href="data:image/png;...>
    </image>
    </a>
  </g>
  <g id="Layer_1_xA0_Image_1_">
    <a id="Layer_1_xA0_Image" xlink:href="http://www.anotherexample.com"  transform="matrix(1 0 0 1 308 164)">
    <image style="overflow:visible;" width="137" height="46" xlink:href="data:image/png;...>
    </image>
    </a>
  </g>
</svg>

I'm working with a JPG file that I sliced up in Photoshop and then exported to a SVG from Illustrator. This is the code it produced.

Upvotes: 1

Views: 1793

Answers (1)

user1480951
user1480951

Reputation: 143

Just realized elements within the svg are clickabel - the problem was actually the cursor not changing styles so I thought it wasn't working.

I added cursor:pointer; to the links and it looks good now.

Upvotes: 1

Related Questions