ian*_*man 129 html anchor svg object
我在我的HTML页面中有一个SVG对象并将其包装在一个锚点中,因此当单击svg图像时,它会将用户带到锚点链接.
<a href="http://www.google.com/">
<object data="mysvg.svg" type="image/svg+xml">
<span>Your browser doesn't support SVG images</span>
</object>
</a>
当我使用此代码块时,单击svg对象不会将我带到谷歌.在IE8中,范围文本是可点击的.
我不想修改我的svg图像以包含标签.
我的问题是,我怎样才能使svg图像可点击？
小智 204
实际上,解决这个问题的最好方法是......在<object>标签上,使用:
pointer-events: none;
注意:安装了广告拦截器插件的用户在悬停时会在右上角看到一个类似于标签的[Block](与flash横幅相同).通过设置这个css,它也会消失.
http://jsfiddle.net/energee/UL9k9/
小智 34
我有同样的问题,并设法解决这个问题:
使用设置为block或inline-block的元素包装对象
<a>
<span>
<object></object>
</span>
</a>
添加到<a>标签:
display: inline-block;
position: relative;
z-index: 1;
和<span>标签:
display: inline-block;
和<object>标签:
position: relative;
z-index: -1
在这里查看示例:http://dabblet.com/gist/d6ebc6c14bd68a4b06a6
通过评论20在这里找到https://bugzilla.mozilla.org/show_bug.cgi?id=294932
noe*_*mcg 31
我想对此表示赞赏,但我在这里找到了解决方案:
https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable
将以下内容添加到锚的css中:
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
<a href="#" class="svg">
<object data="random.svg" type="image/svg+xml">
<img src="random.jpg" />
</object>
</a>
链接适用于svg和后备.
Ben*_*ain 23
您也可以在SVG的底部粘贴这样的东西(在结束</svg>标记之前):
<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
<rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>
然后只需修改链接以适应.我已经使用了100%的宽度和高度来覆盖它所处的SVG.这项技术归功于Clearleft.com的智能人员 - 这是我第一次看到它使用的地方.
Eri*_*röm 22
最简单的方法是不使用<object>.而是使用<img>标签,锚应该工作得很好.
Feu*_*mel 18
理查德解决方案的简化.至少在Firefox,Safari和Opera中起作用:
<a href="..." style="display: block;">
<object data="..." style="pointer-events: none;" />
</a>
有关其他解决方案,请访问http://www.noupe.com/tutorial/svg-clickable-71346.html.
要在所有浏览器中实现此目的,您需要结合使用@energee,@ Richard和@Feuermurmel方法.
<a href="" style="display: block; z-index: 1;">
<object data="" style="z-index: -1; pointer-events: none;" />
</a>
添加:
pointer-events: none; 使它在Firefox中运行.display: block; 让它在Chrome和Safari中运行.z-index: 1; z-index: -1; 它也适用于IE.