使html svg对象也成为可单击的链接。
使html svg对象也成为可单击的链接。
提问于 2012-07-07 18:05:16
我在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图像可点击？
回答 10
Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 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和回退上工作。
Stack Overflow用户
发布于 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的聪明人--这是我第一次看到它的地方。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11374059
复制相关文章
相似问题