Question

这个问题与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 tab-content类对象中。我还更新了我的html代码，以显示我的锚点的bootstrap父对象。

更新2：

我尝试从我的项目中删除Bootstrap，如果有任何未知的干扰或声明，问题仍然存在。

更新3：

更新了图片并添加了所有父对象及其CSS。

Answer 1

你分享的图片表明你的风格越来越过，因为我可以看到它从底部出来，尽管你已经设置了溢出隐藏...
尝试将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上，转到“设置＆gt; Safari＆gt;高级”，然后启用“Web Inspector”。
通过USB线将iPhone连接到Mac。
在菜单中打开Safari打开Develop，然后转到您的设备，然后点击您要检查的网页（它将在您的设备上显示网页）。
Web Inspector工作; - ）

Answer 2

对我来说，它工作得很好，即使在iOS上也是如此！

然而，一些JS / jQuery应该可以解决这个问题，以免它在某些系统上运行：

UPDATE table_name
SET    blob_column = EMPTY_BLOB()
WHERE  id          = your_id;

<强>演示：

＆＃13;

$('a').on('touchend, click', function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  window.location = url;
});

＆＃13;

$('a').on('touchend, click', function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  window.location = url;
});

＆＃13;

.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;
}

＆＃13;

Answer 3

尝试将onclick=""添加到object元素。我必须将其添加到label元素，以使它们可以在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>

制作一个html svg对象也是一个可点击的链接（在iPhone上）

3 个答案:

更新 - 使用Mac上的Safari检查iPhone上的页面