大佬教程收集整理的这篇文章主要介绍了制作一个html svg对象也是一个可点击的链接(在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.
.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,请注明来意。