我已经为此苦苦挣扎了好几天，但似乎我自己无法解决这个问题。我希望有人可以帮助...或者只是告诉我这是根本不可能的，我会找到另一种方法:)
这是我的问题的简化版本：
.left {
fill: yellow;
pointer-events: visible;
}
.left:hover {
opacity: 0.3;
}
.middle {
fill: red;
pointer-events: visible;
}
.middle:hover {
opacity: 0.8;
pointer-events: visible;
}
.right {
fill: blue;
}
.right:hover {
opacity: 0.6;
pointer-events: visible;
}
<svg class="test" width="500px" height="500px">
<g name="Layer" class="group">
<ellipse class="left" cx="120" cy="160" rx="80" ry="81" />
<ellipse class="right" cx="342" cy="271" rx="93" ry="97" />
<ellipse class="middle" cx="223" cy="176" rx="115" ry="153" />
</g>
</svg>
将鼠标悬停在椭圆上时，其不透明度会被修改。还行吧。
我想要实现的是，当鼠标悬停在两个椭圆的交点上时，会触发相关椭圆的两个定义的：hover。目前，当鼠标指针位于红色椭圆和蓝色椭圆（在交叉点）上时，只有红色椭圆受到悬停的影响。
我无法将它们分组，因为：
- 所有 3 个椭圆将被视为始终悬停
- :hover 效果不同
我认为“指针事件”的全部要点是一次处理多个重叠的形状，但我一直在尝试以各种可能的方式使用该属性，但没有成功。
我正在使用 Reactjs，因此任何有关 Javascript 解决方案的可能提示都会有所帮助。
我喜欢 @Connum 附带的解决方案，但我认为它可以简化：
let ellipses = document.querySelectorAll("ellipse")
function getAllElementsFromPoint(rootEl, x, y) {
var item = document.elementFromPoint(x, y);
//in this case is tagName == "ellipse" but you can find something else in commun, like a class - for example.
while (item && item.tagName == "ellipse") {
item.classList.add("hover")
item.style.pointerEvents = "none";
item = document.elementFromPoint(x, y);
}
}
var svg = document.querySelector('svg.test');
svg.addEventListener('mousemove', function(ev) {
// first add pointer-events:all and remove the class .hover from all elements
ellipses.forEach(e=> {
e.style.pointerEvents = "all";
e.classList.remove('hover');
});
// then get all elements at the mouse position
// and add the class "hover" to them
getAllElementsFromPoint(svg, ev.clientX, ev.clientY)
});
.left {
fill: yellow;
}
.left.hover {
opacity: 0.3;
}
.middle {
fill: red;
}
.middle.hover {
opacity: 0.8;
}
.right {
fill: blue;
}
.right.hover {
opacity: 0.6;
}
svg {
border: 1px solid;
}
<svg class="test" width="500px" height="500px">
<g name="Layer" class="group">
<ellipse class="left" cx="120" cy="160" rx="80" ry="81" />
<ellipse class="right" cx="342" cy="271" rx="93" ry="97" />
<ellipse class="middle" cx="223" cy="176" rx="115" ry="153" />
</g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
