鼠标悬停SVG元素时无法显示对应文本的实现求助

先给SVG里的矩形元素加专属类名作为交互触发锚点，调整后的SVG代码：

<svg width="400" height="180">
  <rect class="hover-trigger" x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <text class="img__description" x="50" y="100" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>

配套CSS规则如下：

• 文本默认设置为透明隐藏状态，搭配短时长过渡优化视觉体验

.img__description {
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* 悬停触发矩形时，展示相邻关联文本 */
.hover-trigger:hover + .img__description {
  opacity: 1;
}

适配调整提示：如果文本和矩形之间嵌套了其他SVG标签，把相邻兄弟选择器+替换为通用兄弟选择器~即可，不需要元素严格相邻也能正常匹配。
无响应踩坑排查：不要给矩形元素设置pointer-events: none；如果矩形填充为完全透明，需要显式配置fill: transparent，否则部分浏览器会判定矩形无有效交互区域，不响应悬停事件。

如果SVG内部元素层级嵌套较多，CSS选择器难以精准关联触发元素和展示文本，可以直接通过DOM事件绑定实现交互：

// 获取对应DOM节点
const triggerRect = document.querySelector('.hover-trigger');
const descText = document.querySelector('.img__description');
// 初始化文本隐藏状态
descText.style.opacity = 0;
// 绑定悬停触发逻辑
triggerRect.addEventListener('mouseenter', () => {
  descText.style.opacity = 1;
});
triggerRect.addEventListener('mouseleave', () => {
  descText.style.opacity = 0;
});

该方案不受元素在SVG内的DOM排列顺序限制，只要能通过选择器拿到对应节点，就能稳定触发交互。

内容的提问来源于stack exchange，提问作者Riley Christian