我有一个内联 SVG,其中有指向其他 div 的链接。
在台式机和 Android 移动设备上一切正常,而在 iPad 和 iPhone 上则不然。
当我点击链接时,它会闪烁,就好像它已经识别出它是一个链接但没有任何 Action 发生。
我的 SVG 是一张 map ,上面有 15 个图标,而且非常非常长,所以大大简化了
或下面的 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 a href 链接到外部网站和其他 div。
我可以编辑内联 SVG 以便链接在 iOS 上工作吗?如果不是,javascript 会是解决方案吗?
最佳答案
这可能是也可能不是正确的做事方式,但它确实有效。
我从 anchor 标记中删除了 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>
关于ios - svg 中的链接在 iOS 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37262814/