Указатель мыши при наведении/JQuery нажмите на событие SVG встроенный в объект элемент не работает

Question

Я использую 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; 
} 

Однако я обнаружил, что во-первых, когда я наводил элемент, указатель мыши не изменяется. Однако эффекты наведения, которые изменяют сам элемент (например, изменение bg-color), работают нормально. Во-вторых, обработчик jQuery, который я прикрепляю, не срабатывает.

Это ограничение какого-либо элемента <object> или того, как работает SVG? Любые комментарии или предложения оценены.

Answer 1

В моем опыте 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); 

Edit:

Если вам нужно использовать <object> тег (например, потому что файл SVG ссылается на внешние активы), мое решение было бы создать прозрачный оверлей DIV из той же ширины и высоту, абсолютно расположенную над вершиной объекта, и вместо этого связывают события с этим div.