<a> tag link for inline SVG not working in Safari

Question

I want to be able to have users click the SVG image and it will link to a div further down the page. It works in Firefox and Chrome but not at all in Safari. The SVG shows up but i

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"v x="0px" y="0px"
   viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">

 <a xlink:href="#sr-021" class="svg">
  <g id="s-021" >
   <path id="n-nv" class="st0" d="M154.6,283.9l0.3-1.7l0.2-0.9l0.1-0.5v-0.2v-0.1l0.2-1.4l1-5.5l0.3-1.7l0.6-3l0.8-4.2l1.4-7.5
l0.3-1.4l0.5-2.8l0.1-0.6l0.9-5.1l0.1-0.8l0.5-2.8l0.5-2.6l0.4-2.4l0.4-1.9l0.5-2.6l0.5-2.6l0.6-3.3l0.1-0.5l0.9-5.1l0.3-1.7
l0.3-1.5l0.3-1.9l0.3-1.8l0.3-1.6l0.2-1.3l0.2-1l0.1-0.8l-74.7-16.6c-0.6,1.9-15,53.3-15.2,54.2L78,249v0.1l0.2,0.4l0.5,0.7l1,1.5
l0.4,0.6l0.7,1.1l1.4,2.1l0.6,0.9l0.7,1.1l1.1,1.7l0.8,1.2l1,1.5l0.6,0.9l6,9l2.4,3.6l1.2,1.7l0.7,1l0.2,0.4l0.1,0.1l56.8,6.4v-0.1
L154.6,283.9z"/>
  </g>
 </a>
</svg>

<div id="sr-021" class="text">
  <div class="textrow">
     <h1>
          Hello
     </h1> 
  </div>
</div>

JS Fiddle: https://jsfiddle.net/dana6/rw1yjn4j/

Answer 1

I am not sure what really happens here, but first, you should not set the XML declaration ( <?xml version="1.0" encoding="utf-8"?> ) in the middle of your HTML document like this.

Note that it is placed in the middle of your HTML document in the fiddle, but if the markup you posted in your question is all you've got it in your page, then it's even worse, since the parser will think it has to deal with an svg document, but you are appending some HTML elements at the end, outside of the root element.

Anyway, this apparently is not the issue with Safari, which has probably more to do with relative paths.

A rough solution is to use an absolute path instead, where the location of your file is followed by the hash selector.

 // or you can set it through javascript document.querySelector('a').setAttributeNS('http://www.w3.org/1999/xlink', 'href', location.href + '#sr-021') 

 a.svg { position: relative; display: inline-block; z-index: 1; } a.svg:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left:0; } svg { pointer-events: all; } 

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"vx="0px" y="0px" viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve"> <!-- Safari needs an absolute path, don't know why --> <a xlink:href="http://stacksnippets.net/js#sr-021" class="svg"> <g id="s-021" > <path id="n-nv" class="st0" d="M154.6,283.9l0.3-1.7l0.2-0.9l0.1-0.5v-0.2v-0.1l0.2-1.4l1-5.5l0.3-1.7l0.6-3l0.8-4.2l1.4-7.5 l0.3-1.4l0.5-2.8l0.1-0.6l0.9-5.1l0.1-0.8l0.5-2.8l0.5-2.6l0.4-2.4l0.4-1.9l0.5-2.6l0.5-2.6l0.6-3.3l0.1-0.5l0.9-5.1l0.3-1.7 l0.3-1.5l0.3-1.9l0.3-1.8l0.3-1.6l0.2-1.3l0.2-1l0.1-0.8l-74.7-16.6c-0.6,1.9-15,53.3-15.2,54.2L78,249v0.1l0.2,0.4l0.5,0.7l1,1.5 l0.4,0.6l0.7,1.1l1.4,2.1l0.6,0.9l0.7,1.1l1.1,1.7l0.8,1.2l1,1.5l0.6,0.9l6,9l2.4,3.6l1.2,1.7l0.7,1l0.2,0.4l0.1,0.1l56.8,6.4v-0.1 L154.6,283.9z"/> </g> </a> </svg> <div id="sr-021" class="text"> <div class="textrow"> <h1> Hello </h1> </div> </div>