制作一个html svg对象也是一个可点击的链接(在iPhone上)_html-js-css

概述这个问题与 make an html svg object also a clickable link相同,但给出的答案似乎不适用于iPhone ios 9.3(safari和chrome浏览器).我重新问这个问题,希望它们是解决问题的新方法或适应iPhone的答案. 此外,使用< object>以外的标签.在我的情况下,标签是不可能的. CSS .tab-svg-link { displ 这个问题与 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 > <!--container bootstrap class-->        <div >            <div > <!--tab-content bootstrap class-->                <div > <!--tab-pane bootstrap class-->                    <a href="link.PHP" >                         <object type="image/svg+xml"  ID='svg-object-1'                             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" >  <object type="image/svg+xml"  ID='svg-object-1'  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上)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1139775.html

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

发表评论

评论列表（0条）