links inside svg not working on iOS

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

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?

Solution

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