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

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

请注意，它位于HTML文档的中间位置，但如果您在问题中发布的标记是您在页面中获得的标记，那么情况会更糟，因为解析器会认为它必须处理svg文档，但是你会在根元素之外的末尾附加一些HTML元素。

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

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: