HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了制作一个html svg对象也是一个可点击的链接(在iPhone上)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这个问题与 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选项卡内容类对象中.我还更新了我的html代码,以显示我的锚点的bootstrap父对象.

更新2:

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

更新3:

更新了图像并添加了所有父对象及其CSs.

解决方法

你分享的图像表明你的风格越来越过,因为我可以看到它从底部出来,尽管你已经设置了溢出隐藏…
尝试在您的链接中添加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 Inspector”.>通过USB线将iPhone连接到Mac.>打开Safari打开菜单中的菜单,然后转到您的设备,然后单击您要检查的网页(它将显示您设备上打开的网页).> Web Inspector工作;-)

大佬总结

以上是大佬教程为你收集整理的制作一个html svg对象也是一个可点击的链接(在iPhone上)全部内容,希望文章能够帮你解决制作一个html svg对象也是一个可点击的链接(在iPhone上)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。