links inside svg not working on iOS

Question

I have an inline SVG inside which I have links to other divs.

On desktop and android mobile devices everything works fine whereas on iPad and iPhone it doesn't.

When I tap on the link it flashes as if it has recognised that it is a link but no action takes place.

My SVG is a map with 15 icons on it and is very very long so there's a greatly simplified

jsfiddle here

Or CSS and HTML below

  #link { margin-top: 1000px; height: 100px; width: 100px; background: red; } 

 <svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <clipPath id="p.0"> <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path> </clipPath> <g clip-path="url(#p.0)"> <path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path> <a xlink:href="#link"> <path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path> </a> </g> </svg> <div id="link">Linked div</div> 

Links to external websites embedded in the SVG work fine on iOS as do normal HTML a href links to both external websites and other divs.

Can I edit the inline SVG so that the links work on iOS? If not would javascript be the solution?

Answer 1

This may or not be the right way to do things but it works.

I removed xlink:href="#" from the anchor tag, gave each one an id then used really simple jquery to open the hidden div.

I have a feeling this breaks rules somewhere but it's the best I can come up with at the moment. Other advice and opinions are welcome.

HTML, CSS, jQuery below:

  $('#linkTo').click(function() { $("#hiddenDiv").toggle(); }); 

  #hiddenDiv { display: none; height: 100px; width: 100px; background: red; } .link { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <clipPath id="p.0"> <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path> </clipPath> <g clip-path="url(#p.0)"> <path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path> <a id="linkTo" class="link"> <path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path> </a> </g> </svg> <div id="hiddenDiv"> </div> 

jsfiddle here

Answer 2

TLDR; The answer is to attach a click event, setting location.href to the element. in IOS it seems anchors don't work.