svg中的链接不适用于iOS
问题描述:
我有一个内联SVG,其中我有其他div的链接。svg中的链接不适用于iOS
在桌面和Android移动设备上一切正常,但在iPad和iPhone上却没有。
当我点击链接时,它闪烁,好像它已经认识到它是链接但没有动作发生。
我的SVG是与它15个图标的地图,是非常非常长,所以有一个大大简化
下面#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>
或CSS和HTML
链接到SVG中嵌入的外部网站在iOS上正常工作,正常HTML链接href链接外部网站和其他divs。
我可以编辑内联SVG,以便链接可以在iOS上运行吗?如果不是JavaScript的解决方案?
答
这可能或不是正确的做法,但它的工作原理。
我从锚标记中删除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>