内联 SVG 的 <a> 标记链接在 Safari 中不起作用

Question

我希望能够让用户单击 SVG 图像，它会链接到页面下方的 div。它适用于 Firefox 和 Chrome，但根本不适用于 Safari。 SVG 出现了，但我

<?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 小提琴：https://jsfiddle.net/dana6/rw1yjn4j/

Answer 1

我不确定这里到底发生了什么，但首先，您不应该像这样在 HTML 文档的中间设置 XML 声明 (<?xml version="1.0" encoding="utf-8"?>)。

请注意，它在小提琴中放置在 HTML 文档的中间，但如果您在问题中发布的标记是您页面中的全部内容，那么情况会更糟，因为解析器会认为它必须处理一个 svg 文档，但您在最后附加了一些 HTML 元素，在根元素之外。

无论如何，这显然不是 Safari 的问题，它可能更多地与相对路径有关。

一个粗略的解决方案是使用绝对路径，其中文件的位置后跟哈希选择器。

// 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"v x="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>