How to use the same event for a SVG-set at the beginning and the end?

advertisements

I am trying to define a "popup" that toggles when certain element is clicked. Something like this:

<text id="t" x="498" y="207" visibility="hidden">hello
  <set attributeName="visibility" from="visible" to="hidden"
  begin="t.click" end="t.click"/>
</text>

Any ideas how can i accomplish this using set?

The solution using Javascript is straightforward but i need it to be a "set", if possible.


You need two elements to do a toggle as far as I can see. You can't make an animation depend on CSS property state but you can make event handling do so.

<text id="t2" x="498" y="207" visibility="hidden" pointer-events="all">hello
</text>
<text id="t" x="498" y="207" visibility="visible">hello
  <set attributeName="visibility" from="visible" to="hidden"
  begin="t.click"/>
  <set attributeName="visibility" from="hidden" to="visible"
  begin="t2.click"/>
</text>