make an html svg object also a clickable link (on

2019-04-26 16:43发布

站内问答 / HTML/CSS
1261 3 6

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:

enter image description here

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.

3条回答
我欲成王，谁敢阻挡
2楼-- · 2019-04-26 17:20

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

  1. On your iPhone, go to "Settings > Safari > Advanced" and turn on "Web Inspector".
  2. Attach your iPhone to your Mac via USB cable.
  3. 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.
  4. Web Inspector works ;-)
查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-04-26 17:37

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>

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2019-04-26 17:38

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)