html - 如何使 SVG 元素不可见但仍对 onMouseUp 使用react

Question

我想在用户点击时隐藏一个 svg-group。如果用户点击 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

您可以使用 visibility: hidden 只要您还设置了 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>