Как сделать SVG-элемент невидимым, но при этом реагировать на onMouseUp

Question

Я хочу скрыть svg-группу, когда пользователь нажимает на нее.Если пользователь нажимает на место, где svg-группа была до того, как она была скрыта (она должна быть там, вы просто не можете ее видеть), то она должна появиться снова.Какое свойство 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 .

Вы не можете использовать 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, но ни один из них не работает.Вместо этого попробуйте использовать свойство opacity в CSS.

Answer 3

Используйте opacity в css:

g {
  opacity: 0;
}