我在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对象并不会将我带到google。在IE8<中,可单击跨度文本。
我不想修改我的svg图像以包含标签。
我的问题是,如何才能使svg图像可点击?
发布于 2012-10-05 00:51:23
我遇到了同样的问题,并设法通过以下方式解决了这个问题:
使用设置为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
发布于 2013-08-02 21:40:50
我很想为此负责,但我在这里找到了一个解决方案:
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>
Link在svg和回退上工作。
发布于 2013-10-24 06:30:11
你也可以把类似这样的东西放在你的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的聪明人--这是我第一次看到它的地方。
https://stackoverflow.com/questions/11374059
复制相似问题