首先明确你的核心需求：点击SVG组时隐藏它，再次点击它原本占据的空间（元素仍存在）时重新显示。你之前尝试的visibility: hidden和display: none之所以无效，是因为它们的特性限制了事件触发：

• display: none：元素会完全从文档流中移除，不再占据任何空间，自然无法在原位置触发点击事件。
• visibility: hidden：元素虽然保留布局空间，但默认不会接收任何鼠标事件，所以点击原位置也没有反应。

而onmouseup属性是完全适用的，问题出在你选择的隐藏方式上。下面是两种可行的解决方案：

方案一：使用opacity实现隐藏（推荐） #

opacity: 0会让元素完全透明（视觉上隐藏），但依然保留布局空间，并且能正常响应鼠标事件，完美匹配你的需求。

修改你的JavaScript函数如下：

function fnClickedSVGGroup(el) {
  // 切换透明度：当前透明则显示，否则隐藏
  el.style.opacity = el.style.opacity === '0' ? '1' : '0';
}

你的SVG代码不需要额外修改，保持原结构即可：

<g onmouseup="fnClickedSVGGroup(this)">
  <rect x="0" y="0" width="10" height="10"/>
  <text x="5" y="5">Click me!</text>
</g>

方案二：结合visibility和pointer-events #

如果你更倾向于用visibility，可以通过强制开启鼠标事件来解决问题。先定义一个CSS类：

.hidden-svg-group {
  visibility: hidden;
  pointer-events: auto; /* 强制元素接收鼠标事件 */
}

然后修改JavaScript函数来切换这个类：

function fnClickedSVGGroup(el) {
  el.classList.toggle('hidden-svg-group');
}

这个方法的原理是：pointer-events: auto会覆盖visibility: hidden带来的事件禁用，让元素在隐藏状态下依然能被点击。

总结一下，核心就是要保证元素在隐藏状态下依然占据空间且能接收鼠标事件，这两种方法都能满足你的需求，推荐第一种更简洁的opacity方案。

内容的提问来源于stack exchange，提问作者Philipp Kolbe