使 html svg 对象也成为可点击的链接（在 iphone 上）答案

【问题标题】：make an html svg object also a clickable link (on iphone)使 html svg 对象也成为可点击的链接（在 iphone 上）
【发布时间】：2016-06-29 18:03:08
【问题描述】：

这个问题与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 代码以显示我的锚的引导父对象。

更新 2：

我尝试从我的项目中删除 Bootstrap，以防出现任何未知的干扰或声明，但问题仍然存在。

更新 3：

更新图像并添加所有父对象及其 css。

【问题讨论】：

标签： html css iphone svg

【解决方案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 上，转到“设置 > Safari > 高级”并打开“Web 检查器”。
通过 USB 数据线将 iPhone 连接到 Mac。
在菜单中打开Safari 打开Develop 并转到您的设备并点击您要检查的网页（它将显示您设备上打开的网页）。
Web Inspector 工作 ;-)

【讨论】：

我无法传递指向该站点的链接，因为它尚未生效。底部重叠的图像部分是因为我在创建图像时向该正方形添加了边框（我更新了图像）。我将我的代码更改为您的建议，它仍然有效。我目前在我的 Windows 计算机上编程，但你有关于如何使用我的 mac 和 iphone 检查元素的链接，如你上一个声明中所建议的那样。
已添加Inspecting pages on iPhone with Safari on mac 部分...希望对您有所帮助:)

【解决方案2】：

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

但是，如果它在某些系统上不起作用，一点点 JS/jQuery 应该可以解决问题：

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

演示：

$('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>

【讨论】：

感谢您的回复，但即使添加了您的 javascript 代码，我仍然得到相同的结果。澄清一下，我的代码适用于我的 macbook 上的 ios，但不适用于我的 iphone 6。
我的锚点在引导程序 tab-content 类对象中，如果它有什么不同的话。我不相信这会对锚产生任何影响，但这是你工作和我工作之间的唯一区别。 - @cocoseis

【解决方案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>

【讨论】：

添加了您所说的内容，但仍然无法正常工作。我会记住这一点，以备将来使用，谢谢。