制作一个html svg对象也是一个可点击的链接(在iPhone上)
Jos*_*ues 7 html css iphone svg
这个问题与使一个html svg对象也是一个可点击链接相同,但给出的答案似乎不适用于iPhone ios 9.3(safari和chrome浏览器).我重新问这个问题,希望它们是解决问题的新方法或适应iPhone的答案.
此外,<object>在我的情况下,使用标签以外的标签是不可能的.
CSS
.tab-svg-link {
display: block;
z-index: 1;/*added this to test if it fixes the problem*/
overflow: hidden;
float: left !important;
width: 325px;
height: 280px;
padding-right: 10px;
padding-left: 15px;
padding-top: 20px;
}
.tab-svg-object{
z-index: -1;/*added this to test if it fixes the problem*/
pointer-events: none;
}
/*update 3 -- added containing divs for code completion */
.index-container {
padding: 15px 20px;
}
.layout-content {
margin-top: 75px;
}
HTML
<body>
<div class="layout-content container"> <!--container bootstrap class-->
<div class="index-container">
<div class="tab-content"> <!--tab-content bootstrap class-->
<div class="tab-pane"> <!--tab-pane bootstrap class-->
<a href="link.php" class="tab-svg-link">
<object type="image/svg+xml" style="visibility:visible !important" id='svg-object-1' class="tab-svg-object"
data="dir/my.svg">Your browser does not
support SVGs
</object>
</a>
</div>
</div>
</div>
</div>
</body>
上面的代码创建了这个:
如果我单击橙色区域(这是achor)它可以工作,但如果我点击SVG顶部(<object>)它不会.上面的代码适用于我的Windows计算机,Mac和Android手机上的Firefox,Chrome和Internet Explorer.
更新:
我的锚在Bootstrap tab-content类对象中.我还更新了我的html代码以显示我的锚点的bootstrap父对象.
更新2:
我试图从我的项目中删除Bootstrap,如果有任何未知的干扰或声明,问题仍然存在.
更新3:
更新了图像并添加了所有父对象及其CSS.
对我来说，即使在 iOS 上，它也运行得很好！
然而，一点 JS/jQuery 应该可以解决问题，以防它在某些系统上不起作用：
$('a').on('touchend, click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
window.location = url;
});
演示：
$('a').on('touchend, click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
window.location = url;
});
$('a').on('touchend, click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
window.location = url;
});.tab-svg-link {
display: block;
z-index: 1;
/*added this to test if it fixes the problem*/
overflow: hidden;
width: 325px;
height: 280px;
padding-right: 10px;
padding-left: 15px;
padding-top: 20px;
}
.tab-svg-object {
z-index: -1;
/*added this to test if it fixes the problem*/
pointer-events: none;
display: inline-block;
}