Menu
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.
365
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...
Safari open Develop in menu and go to your device and click on webpage (it will show webpages open on your device) you'd like to inspect.
167
For me it is working just fine, even on iOS!
However, a little JS/jQuery should do the trick in case its not working on some systems:
$('a').on('touchend, click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
window.location = url;
});
Demo:
$('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;
}<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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
