Javascript 如何向JS中硬编码的svg添加事件侦听器？

我在JavaScript中用字符串硬编码了这个SVG图标，但我不能向它添加侦听器

let zoom_in_icon = '<div>';
zoom_in_icon = zoom_in_icon +'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/>';
zoom_in_icon = zoom_in_icon + '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" fill="white"/>';
zoom_in_icon = zoom_in_icon + '</svg>';
zoom_in_icon = zoom_in_icon + '</div>';

这样做是可能的，还是必须使用DOM使用普通Javascript创建SVG

更新： 现在我尝试使用普通Javascript创建一个Div，这样我就可以直接引用DOM，而不是字符串，这可能是它失败的原因

var newElement = document.createElement('div');
let zoom_in_icon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/>';
zoom_in_icon = zoom_in_icon + '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" fill="white"/>';
zoom_in_icon = zoom_in_icon + '</svg>';
newElement.innerHTML = zoom_in_icon;

newElement.addEventListener('mouseover', function (evt) {
    newElement.style.cursor = 'pointer';        
});
newElement.addEventListener('mouseout', function (evt) {
    newElement.style.cursor = 'auto';
});

var newElement=document.createElement（'div'）；
让放大图标=“”；
放大图标=放大图标+“”；
放大图标=放大图标+“”；
newElement.innerHTML=放大图标；
newElement.addEventListener（'mouseover'，function（evt）{
newElement.style.cursor='pointer'；
});
newElement.addEventListener（'mouseout'，function（evt）{
newElement.style.cursor='auto'；
});

---

这还是不行！现在它没有失败，但是，没有将侦听器添加到div。当我悬停时，它不会更改光标。

我在扩展chrome projet上使用sprite svg，因此我使用了一个类sprite：

class Sprite {
    /**
     * 
     * @param {string} url URL of file sprite.svg
     */
    constructor(url) {
        this.url = url;
        this.create();
    }
    
    /**
     * Load a file sprite SVG and add his DOM in your body at hidden
     * to be able to use icones of your sprite
     */
    create() {
        $.get(chrome.runtime.getURL(this.url), (data) => {
            var div = document.createElement('div');
            div.style.display = 'none';
            div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
            document.body.insertBefore(div, document.body.childNodes[0]);
        });
    }

    /**
     * Create a SVG element
     * @param {string} id Id of your icon
     * @param {number} width Width display
     * @param {number} height Height display
     * @returns {SVGSVGElement} SVG Element 
     */
    createSVG(id, width, height) {
        let svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        let useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        svgElem.setAttribute('width', width.toString());
        svgElem.setAttribute('height', height.toString());
        useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', id);
        svgElem.appendChild(useElem);
        return svgElem;
    }
}

要使用它，我正在这样做：

let spriteButton = new Sprite('assets/images/sprites/buttons.svg');
let bt_prev = spriteButtons.createSVG('#ss_previous', 25, 25);
let bt_play = spriteButtons.createSVG('#ss_play', 25, 25);

对于悬停css，我使用以下命令：

// Default style
$('#zoom_in_icon').css(styleButton);

// Hover in & out style
$('#zoom_in_icon').hover(
  (e) => {
    $(e.currentTarget).css(styleButtonHover);
  },
  (e) => {
     $(e.currentTarget).css(styleButton);
   },
);

这里是您的精灵svg：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 24 24" id="your_icon_id">
        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z"/>
    </symbol>
</svg>

---

希望它能对你有所帮助：）

你是否在身体上的某个地方或其他任何地方添加了div

document.body.appendChild（新元素）

您可以通过以下方式更改div声明：
让放大图标=“”

要使自定义css更容易使用
#zoom_in_icon
您的变量
zoom_in_icon
是一个文本字符串，而不是对DOM元素的引用。参见@Danny'365CSI'Engelman，请检查更新后的问题。您的第二个版本对我来说非常好-假设
新元素在某个点实际附加到文档中。“当我悬停时，它不会更改光标。”-您为什么要首先使用事件侦听器？
cursor
属性一开始只应用于处于悬停状态的元素，因此您可以通过CSS应用它，然后完成：
div{cursor:pointer；}
@CBroe我刚刚做了，我以前不知道！我真的不懂这个语法。我使用的是Javascript，主要是带有jquery的Javascript。
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 24 24" id="your_icon_id">
        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z"/>
    </symbol>
</svg>

#your_icon_id {
  color: white;
}