svg内的链接无法在iOS上运行

时间:2016-05-16 20:34:30

标签: ios ipad svg href xlink

我有一个内联SVG,里面有我链接到其他div。

在桌面和Android移动设备上一切正常,而在iPad和iPhone上却没有。

当我点击链接时,它会闪烁,就像它已经识别出它是链接但没有动作一样。

我的SVG是一张带有15个图标的地图,非常长,所以大大简化了

jsfiddle here

或下面的CSS和HTML

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

与SVG中嵌入的外部网站的链接在iOS上正常工作,正常的HTML链接到外部网站和其他div。

我可以编辑内联SVG,以便链接在iOS上运行吗?如果没有,javascript会成为解决方案吗?

2 个答案:

答案 0 :(得分:0)

这可能是或不是正确的做事方式,但它有效。

我删除了xlink:href =&#34;#&#34;从锚标签,给每个人一个id,然后使用非常简单的jquery打开隐藏的div。

我有一种感觉,这在某个地方打破了规则,但它是我现在能想到的最好的。欢迎提供其他建议和意见。

下面的HTML,CSS,jQuery:

&#13;
&#13;
  $('#linkTo').click(function() {
    $("#hiddenDiv").toggle();
  });
&#13;
     #hiddenDiv {
       display: none;
       height: 100px;
       width: 100px;
       background: red;
     }
     .link {
       cursor: pointer;
     }
&#13;
<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>
&#13;
&#13;
&#13;

jsfiddle here

答案 1 :(得分:0)

TLDR;答案是附加一个click事件,将location.href设置到该元素。在IOS中,锚似乎不起作用。