如何使SVG元素不可见，但仍对onMouseUp做出反应

Question

我想在用户单击它时隐藏一个svg组。如果用户在svg-group隐藏之前点击了该位置（它应该仍然存在，只是看不到它），那么它应该会重新出现。我必须使用哪个CSS属性来实现？还是onmouseup是错误的属性？

我尝试使用visibility: hidden和display: none，但是两者都不起作用。

这是我的svg：

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

Answer 1

您可以使用可见性：隐藏，只要您也相应地设置pointer-events property。

您不能使用display：none，因为这会导致元素根本不存在。

<svg>
<g visibility="hidden" pointer-events="all" onmouseup="alert('hi')">
    <rect x="0" y="0" width="10" height="10"/>
    <text x="5" y="5">Click me!</text>
</g>
</svg>

Answer 2

我尝试使用visibility: hidden和display: none，但没有一个起作用。而是尝试在CSS中使用opacity属性。

Answer 3

在CSS中使用opacity：

g {
  opacity: 0;
}