Javascript 如何创建一个事件；“鼠标盖”；svg文档中的on标记（使用object标记调用）

我有一个svg图像，里面有一些rect元素，都是通过ID标识的。 我这样插入svg：

<object id="svgObject" type="image/svg+xml" data="img/svg/monSvg.svg"></object>

所以这个代码是有效的。但我想在我的“svgItem”上添加鼠标覆盖事件，并尝试使用addEventListner、onmouseover等。。。但它不起作用。。。我的事件无法在对象标记文档中访问

有人能解决这个问题吗

谢谢你的帮助

---

Romain。

老实说，我的第一个猜测是您不能在

中以单个SVG元素为目标，但我的观点是正确的。至少在Firefox（开发者编辑器）、Opera（开发者编辑器）和Safari（9.0.2）中

复制步骤：

HTML/JS

<script>
    function onoff(elm) {
        elm.addEventListener('mouseover', function(e) {
            elm.style.fill = '#f90';
        });
        elm.addEventListener('mouseout', function(e) {
            elm.style.fill = '';
        });
    }

    window.addEventListener('load', function(e) {
        var doc = document.querySelector('#sample'),
            svg = doc.contentDocument || doc.getSVGDocument(),
            path = svg.querySelectorAll('path'),
            i;

        for (i = 0; i < path.length; ++i) {
            onoff(path[i]);
        }
    });
</script>

---

在你的问题中，你有以下几行

svgItem.style.display = "inline" ;

SVG元素没有

display

-flow的概念，尽管存在某种流，您通常需要精确指定元素的绘制位置和方式

---

---

最后，您可能想知道。

我很确定您可以向svg元素添加事件侦听器。你能给我们看一下相关的代码吗？onmouseevent可以很好地处理对象标记，你能发布你做了什么吗？这是一个不起作用的事件：svgItem.addEventListener（“mouseover”，function（）{alert（“test”）；}）；非常感谢你非常好的回答！它现在工作得很好。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="#F00" stroke="#3b5998" stroke-width="4">
    <path d="M28,6h44v16l-22,21l-22-21z" fill="#6d84b4"/>
    <path d="M28,95h44v-16l-22-21l-22,21z" fill="#6d84b4"/>
    <path d="M6,30v42h15l21-21l-21-21z" fill="#afbfde"/>
    <path d="M95,30v42h-15l-21-21l21-21z" fill="#afbfde"/>
  </g>
</svg>

path:hover {
  fill: '#f90';
}

svgItem.style.display = "inline" ;