Is it possible to make SVG text animations infinite? - html

Question

I have made the transparent text appear and disappear within 3 seconds, and I want to click the SVG to make the disappeared text appear again and again, is it poosible to make it?
Thanks for any help and creative thougths
<svg>
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">​Hello
<animate attributeName="opacity" begin="click" dur="0.3s" from="0" to="1" restart="never" fill="freeze"></animate>
<animate attributeName="opacity" begin="click+3" dur="0.3s" from="1" to="0" restart="never" fill="freeze">
</animate>
</text>
</svg>

Answer 1

Don't use 2 animations
For the begin use a list of values separated with semicolons: begin="theSVG.click;theSVG.click+3"
Use repeatCount="indefinite" for an infinite animation.
Instead of using the from and to attributes you can use a values attribute values="0;1;0" where the values are separates by semicolons.
Also the user can't know where the text is so clicking the text may be a problem. Instead you cah give the svg element an id (theSVG - in this case) and use this id to start the animation when the user is clicking the svg element begin="theSVG.click;theSVG.click+3"
You can use any other visible svg element for this.
svg{border:solid}
<svg id="theSVG">
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">​Hello
<animate attributeName="opacity" begin="theSVG.click;theSVG.click+3" dur="0.3s" values="0;1;0" restart="never" repeatCount="indefinite"></animate>
</text>
</svg>
UPDATE
The OP is commenting:
I am tring to make the "HELLO" re-clickable after it disappear after 3s, what should I do?
In this case you need to delete restart="never"
svg{border:solid}
<svg id="theSVG">
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">​Hello
<animate attributeName="opacity" begin="theSVG.click" dur="3s" values="0;1;0" repeatCount="1" fill="freeze"></animate>
</text>
</svg>