使html svg对象也成为可点击的链接（在iPhone上） [英] make an html svg object also a clickable link (on iphone)
问题描述
此问题与
如果我单击橙色区域（这是长柄），它会起作用，但如果我单击顶部的SVG（< object> ）没有。上面的代码可在我的Windows计算机，mac和android手机上的firefox，chrome和Internet Explorer上运行。
更新：
我的锚点位于Bootstrap tab-content 类对象中。我还更新了html代码，以显示锚的引导父对象。
更新2：
I尝试从我的项目中删除Bootstrap，以防出现任何未知干扰或声明，并且问题仍然存在。
更新3：
更新了图像并添加了所有父对象及其css。
您共享的图像表明您的样式已被重写，因为我可以以某种方式看到它来自于一个容器底部，尽管您已将溢出设置为隐藏...
尝试在链接中添加clearfix（< a> 标签）
.tab-svg-link：之后{
content：;
display：table;
clear：两者；
}
.tab-svg-link {display：block; padding-right：10像素； padding-left：15px; padding-top：20像素；}。tab-svg-link：在{content：;之后；显示：表； clear：both;}。tab-svg-object {指针事件：无； 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>您的浏览器不支持SVG< / object>< / a>
如果这没有帮助考虑将URL共享到您的网站...，您还可以将iPhone挂接到Mac（通过USB）并进行检查检查出什么问题的元素...
更新-使用Mac上的Safari检查iPhone上的页面
- 在iPhone上，转到设置> Safari>高级，然后打开 Web检查器。
- 通过USB电缆将iPhone连接到Mac。
- 打开
Safari打开开发在菜单中，转到您的设备，然后单击要检查的网页（它将显示在您的设备上打开的网页）。 - Web Inspector有效；-）
This question is the same as make an html svg object also a clickable link, but the answers given do not seem to work on an iPhone ios 9.3 (safari and chrome browsers). Im re-asking this question in hopes that their are new methods to resolve the problem or an adaptation to the answers to work with an iPhone.
Also, using a tag other than the <object> tag is not possible in my situation.
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>
The code above creates this:
If I click the orange area (this is the achor) it works, but if I click on top of the SVG (<object>) it doesnt. The code above works on my windows computer, mac, and android phone on firefox, chrome, and internet explorer.
Update:
My anchor is inside a Bootstrap tab-content class object. I have also updated my html code to display bootstrap parent objects of my anchor.
Update 2:
I have trying removing Bootstrap from my project, in case of any unknown interference or declaration, and the problem still remained.
Update 3 :
Updated image and added all parent objects with their css.
The image you shared suggests that your styles are getting over-ridden because I can somehow see it's coming out of a container from the bottom despite that you've set overflow hidden...
Try adding clearfix to your link (<a> tag)
.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>
If that doesn't help consider sharing the url to your site... You can also hook your iPhone to your Mac (via USB) and inspect the elements to check out what's wrong...
Update - Inspecting pages on iPhone with Safari on Mac
- On your iPhone, go to "Settings > Safari > Advanced" and turn on "Web Inspector".
- Attach your iPhone to your Mac via USB cable.
- Open
SafariopenDevelopin menu and go to your device and click on webpage (it will show webpages open on your device) you'd like to inspect. - Web Inspector works ;-)
这篇关于使html svg对象也成为可点击的链接（在iPhone上）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
