相关疑难解决方法(0)

我在我的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图像可点击？

当我在html文档onclick中使用object-element 的属性时，它不会响应单击。

在我的文档中，我有一个svg图像，并将其存储在object-element中，因为图像中有些动画仅通过使用img-tag 就会丢失。

在下面的简化示例中，onmouseover在这两个对象的作品，但onclick对刚工作object没有SVG图像。

document.getElementById('test1').onmouseover = hover;
document.getElementById('test1').onclick = click;
document.getElementById('test2').onmouseover = hover;
document.getElementById('test2').onclick = click;

function hover() { alert('Hovered');};
function click() { alert('Clicked');};

<object id='test1' data="https://upload.wikimedia.org/wikipedia/commons/0/01/SVG_Circle.svg" height="50px"></object>

<object id='test2' height="50px" border="1px solid black">some object</object>

我在这里做错什么了吗？还是有可行的替代方法？

为此（以及相关问题）给出的答案建议pointer-events: none在svg-image上使用并将其包装在div中，并将侦听器应用于该div。但是我需要svg-image来响应mouse events，因此无法设置pointier-events: none。