make an html svg object also a clickable link (on iphone)

Question

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.

score 3 · Answer 1 · edited Jul 07 '16 at 12:43

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 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.
Web Inspector works ;-)

Im unable to pass a link to the site because it is not yet live. The part of the image that was overlapping in the bottom was because i added a border to that square when creating the image (ive updated the image). I altered my code to what you suggested and it still does work. I currently program on my windows computer, but do you have link on how to inspect the elements using my mac and iphone, as suggested in your last statement. — Hozeis, Jul 06 '16 at 12:37
Added `Inspecting pages on iPhone with Safari on mac` section... Hope that helps :) — shramee, Jul 06 '16 at 16:01

cocoseis · Answer 2 · 2016-07-04T21:44:12.240

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>

Thanks for the reply but I still get the same results even when I added your javascript code. To clarify, the code I have works on ios on my macbook but not on my iphone 6. — Hozeis, Jul 05 '16 at 12:06
My anchor is inside a bootstrap `tab-content` class object, if it makes any difference. I dont believe this would have any effect on the anchor, but thats the only difference between yours working and mine not. - @cocoseis — Hozeis, Jul 05 '16 at 13:03

score 0 · Answer 3 · answered Jul 08 '16 at 14:26

0

Try adding onclick="" to the object element. I have had to add that to label elements to make them tappable on ios.

<object onclick="" 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>

answered Jul 08 '16 at 14:26

willanderson

1,458
12
13

Added what you said and still not working. Ill keep this in mind for the future do, thanks. – Hozeis Jul 08 '16 at 18:37

make an html svg object also a clickable link (on iphone)

3 Answers3

Update - Inspecting pages on iPhone with Safari on Mac

Linked