这个问题与
make an html svg object also a clickable link相同,但给出的答案似乎不适用于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选项卡内容类对象中.我还更新了我的HTML代码,以显示我的锚点的bootstrap父对象.
更新2：
我试图从我的项目中删除Bootstrap,如果有任何未知的干扰或声明,问题仍然存在.
更新3：
更新了图像并添加了所有父对象及其CSS.
解决方法
你分享的图像表明你的风格越来越过,因为我可以看到它从底部出来,尽管你已经设置了溢出隐藏…
尝试在您的链接中添加clearfix(< a>标记)
尝试在您的链接中添加clearfix(< a>标记)
.tab-svg-link:after {
content:"";
display:table;
clear:both;
}
.tab-svg-link {
display: block;
padding-right: 10px;
padding-left: 15px;
padding-top: 20px;
}
.tab-svg-link:after {
content:"";
display:table;
clear:both;
}
.tab-svg-object {
pointer-events: none;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">Your browser does not support SVGs </object> </a>
如果这无助于考虑将网址分享到您的网站…您还可以将iPhone连接到Mac(通过USB)并检查元素以查看错误…
更新 – 在Mac上使用Safari检查iPhone上的页面
>在iPhone上,转到“设置> Safari>高级”,然后启用“Web Inspector”.>通过USB线将iPhone连接到Mac.>打开Safari打开菜单中的菜单,然后转到您的设备,然后单击您要检查的网页(它将显示您设备上打开的网页).> Web Inspector工作;-)
