1

我正在使用 jQuery 动态添加元素以使用以下代码显示 SVG：

someEl = ('#someElement');
cancelButton = $(document.createElement('object')).attr({
            'class': 'cancelButton',
            'id':parent_id+'_xbtn',
            'data': 'img/cancelBtn.svg',
            'type': 'image/svg+xml'
        });
someEl.after(cancelButton);

function cancel() {
    alert('asd');
}
cancelButton.click(cancel);

我使用这个 CSS 将其设置为用手悬停：

.cancelButton:hover {
    cursor: hand;
    cursor: pointer;
}

但是我发现首先当我悬停元素时，鼠标指针没有改变。不过，修改元素本身（例如更改背景颜色）的悬停效果可以正常工作。其次，我附加的 jQuery 点击处理程序也不会触发。

这是<object>元素或 SVG 工作方式的一些限制吗？任何意见或建议表示赞赏。

4

1 回答 1

2

根据我的经验，作为元素嵌入的 SVG<object>倾向于吞下指针事件（因为浏览器会在对象元素内创建一个新文档，类似于 iframe）。您是否有理由不能只使用<img>标签？例如：

someEl = ('#someElement');
cancelButton = $('<img>').attr({
    'class': 'cancelButton',
    'id':parent_id+'_xbtn',
    'src': 'img/cancelBtn.svg'
});
someEl.after(cancelButton);

function cancel() {
    alert('clicked');
}
cancelButton.click(cancel);

编辑：

如果您需要使用<object>标签（例如，因为您的 SVG 文件引用了外部资产），我的解决方案是创建一个具有相同宽度和高度的透明覆盖 div，绝对位于对象的顶部，然后在该 div 上绑定事件.

于 2013-02-09T08:07:15.017 回答