JavaScript Auf Parent-Element eines SVG-Elements zugreifen

[Photon]

Hallo Community,

ich bin noch sehr frisch in JavaScript und arbeite viel mit Google und der Standarddokumentation, kam damit bisher aber eigentlich ganz gut zum gewünschten Ergebnis. Nun habe ich aber ein Problem, für das ich keine Lösung finde. Es geht um Folgendes: Ich habe mehrere SVG-Elemente, in denen es jeweils eine sichtbare Zeichnung gibt und einen darüber gelegten versteckten Bereich, der, wenn er vom Nutzer angeklickt wird, bewirken soll, dass die sichtbaren Elemente (oder eben das ganze SVG-Element) versteckt wird. Hier ein Minimalbeispiel (die ids mit _42 hinten dran sollen andeuten, dass es von solchen Containern mehrere gibt, die dynamisch versteckt und wieder angezeigt werden sollen, ich also schon irgendwie die Info übergeben muss, welchen von ihnen ich gerade anklicke):

<svg  id="container_42" class="container"
			x="0" y="0"
                        visibility="visible" > <!-- Das soll auf "hidden" gesetzt werden -->

			<rect		id = "hiddenArea_42"
					x = "0" y="0"
					width = "10"
					height = "10"
					visibility = "hidden"
					onclick="hideContainer(evt,???)"  <!-- Hier klicke ich drauf -->
				/>
					
			<circle		id = "circle_42"
					cx = "5" cy = "5" r = "5"
				/>					
</svg>

Nun würde ich gerne haben, dass die Funktion hideContainer, die beim Klicken auf den versteckten Bereich hiddenArea_42 aufgerufen wird, irgendwie auf das ganze SVG-Element container_42 zugreifen und dessen visibility auf "hidden" setzen kann, sodass insbesondere auch circle_42 versteckt wird. Im echten Codebeispiel gibt noch mehrere weitere Unterelemente außer circle_42, die sollen alle mit einem Wisch versteckt werden, deshalb wäre es am bequemsten das Parent-Element container_42 als Ganzes zu verstecken. Aber wir komme ich an ihn ran, wenn ich auf eins seiner Child-Elemente klicke? Was sollte ich als Argument in die hideContainer-Funktion übergeben?

Vielen Dank für euren Input schon mal!
Photon

 

[Enigma]

OnClick ist ein Event. Beim Event wird immer ein Kontext mit übergeben. Im Kontext findest du das geklickte Element.
https://www.w3schools.com/jsref/event_onclick.asp

Wenn du dein Element hast, kannst du im DOM Navigieren.
https://www.w3schools.com/jsref/prop_node_parentnode.asp

 

[Photon]

Vielen Dank, klappt!

Ergänzung (13. Mai 2017)

Nun habe ich aber noch ein kleines Problem: Das onclick-Event klappt nur, wenn das versteckte Rechteck nicht versteckt ist. Ich habe mich nun damit beholfen, dass ich es sichtbar aber weiß gemacht habe. Dann kann das Event aber nicht ausgelöst werden, wenn man auf die eigentlich sichtbaren Elemente im Vordergrund (wie dem Kreis) klickt. Ich könnte auf sie alle auch das gleiche onclick-Event legen, aber das klingt irgendwie umständlich. Gibt es da eine einfachere Lösung?

Ergänzung (13. Mai 2017)

Hat sich erledigt, hab einfach fill-opacity auf Null gesetzt und die versteckten Rechtecke in den Vordergrund geholt.