Javascript SVG元素边界框覆盖元素

我遇到了SVG的透明部分仍然覆盖其下方对象的鼠标事件的问题。这是一个非常简单的例子。我起初认为这是一个所有项目都是独立的SVG元素的问题，这些元素嵌入了

object

标记，但这个问题似乎在使用内联元素时也会出现，例如页面中的示例

如果将鼠标悬停在任一圆上，指针将根据需要更改，但如果将鼠标悬停在红色圆的边界框重叠的蓝色圆上，则会丢失指针交互

我正试图找到一个简单的方法让它们通过。我听说使用css

指针事件

属性可以解决这个问题，但是如果我把它放在任何更高的元素上，作为

的“none”

似乎也会去掉所有子事件

下面是代码片段，以防您不想检查JSFIDLE

//获取所有SVG
var svgElems=document.getElementsByTagName（“svg”）；
//循环列表
对于（让svgElem的svgElem）{
//抓住里面的第一个组元素
var gElem=svgElem.getElementsByTagName（“g”）[0]；
//将光标的样式设置为指针
gElem.style.cursor='pointer'；
}

svg{
外形：1px纯黑；
}

.cls-1{fill:#030093；}
蓝色
.cls-2{fill:#af0000；}
红色

您可以使用

剪辑路径

：

.interaction-spot {
  clip-path: circle(50%);
}

---

实际上，您可以为SVG中的各个元素分配一个ID——只需在编辑器中打开SVG即可访问SVGs DOM，并将ID=“someelement”添加到要传递的任何元素中，然后重新保存SVG。然后，您可以将指针事件：none仅应用于您希望通过单击传递的特定元素，只需将其指向ID即可

svg#someelement, svg#sometherelement, svg#yetanotherelement{
    pointer-events:none;
}

---

您可以在容器上设置指针事件：none，并在内部元素中重置它

//获取所有SVG
var svgElems=document.getElementsByTagName（“svg”）；
//循环列表
对于（让svgElem的svgElem）{
//抓住里面的第一个组元素
var gElem=svgElem.getElementsByTagName（“g”）[0]；
//将光标的样式设置为指针
gElem.style.cursor='pointer'；
}

svg{
外形：1px纯黑；
}
.互动点{
指针事件：无；
}
#第1-2层{
指针事件：自动；
}

.cls-1{fill:#030093；}
蓝色
.cls-2{fill:#af0000；}
红色

我查看了您的JSFIDLE，我很惊讶剪辑路径圆比svg圆大20像素左右。我将背景设置为黑色，这使它更加明显<代码>圆圈（50%）与之匹配得更好。。。weird@TheCrzyMan我没有太注意大小，因为svg的宽度和高度可能与viewBox的值不同。感谢您指出这一点，现在已经更新。问题是我需要通过的是SVG元素的边界框。出于某种原因，即使我只在SVG中的某个特定元素上放置了一个事件，因此指针仅在悬停在该元素上时触发，SVG标记本身的边界框似乎仍然覆盖了它下面的任何HTML元素。我认为这实际上是更好的选择，因为我不必为项目的最终仓库中的每个对象生成并保持剪辑路径遮罩，所以我需要它。我想我没有意识到你需要重置顶部下方的交互。@BeauSeverson你是对的。我已经将选择器更改为类，现在我们有了所需的确切行为。（和一个更干净的解决方案）我只想在这里添加一个注释。如果使用SVG的

对象

嵌入方法放置SVG，则此功能不适用。我可以将

指针事件

应用于SVG中的任何元素，但如果我从包含文档和所有SVG元素的object标记中删除事件，它似乎不会再让任何悬停事件在其中波动。使用object会创建一种阴影dom。。。使用CSS（通常）无法访问它，但可以使用内联样式。看这里