2

我有一个内联 SVG，里面有指向其他 div 的链接。

在台式机和安卓移动设备上一切正常，而在 iPad 和 iPhone 上却不行。

当我点击链接时，它会闪烁，好像它已经识别出它是一个链接，但没有采取任何行动。

我的 SVG 是一张上面有 15 个图标的地图，而且非常长，因此大大简化了

jsfiddle在这里

或者下面的 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 上可以正常工作，就像指向外部网站和其他 div 的普通 HTML a href 链接一样。

我可以编辑内联 SVG 以便链接在 iOS 上工作吗？如果不是，javascript会是解决方案吗？

4

2 回答 2

0

这可能是也可能不是正确的做事方式，但它确实有效。

我从锚标记中删除了 xlink:href="#"，给每个人一个 id，然后使用非常简单的 jquery 打开隐藏的 div。

我有一种感觉，这在某处违反了规则，但这是我目前能想到的最好的方法。欢迎其他建议和意见。

HTML、CSS、jQuery 如下：

  $('#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在这里

于 2016-05-17T20:14:49.990 回答
0

TLDR；答案是附加一个点击事件，将 location.href 设置到元素。在 IOS 中，锚似乎不起作用。

于 2018-08-31T15:09:45.143 回答