SVG set attributeName="visibility" works first time, but not after that - animation

Question

In the following, the text (CLICK ME) is supposed to reappear .5 seconds after the morphMe animation ends. (See the last line of code other than closing tags)
It works fine, making the text appear the first time the animation ends. But it does not ever work after that. I can't figure why it works only once;
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0 0 300 300">
<defs>
<text id="startText" >CLICK ANYWHERE</text>
</defs>
<rect id="startMe" x="0" y="0" width="300" height="300" fill= "red"> </rect>
<g transform="translate(50, 50)">
<path d="M 100,0 200,200 0,200 50,100 z;" fill="green" stroke="black" stroke-linecap="round" stroke-width="32" stroke-linejoin="round" stroke-dasharray="68">
<animate id="morphMe"
restart="always"
begin="startMe.click;startText.click;click;"
attributeName="d"
dur="2s"
calcmode="spline"
repeatCount="2"
values=
"M 100,0 200,200 0,200 50,100 z ;
M 200,0 200,200 0,200 00,0 z ;
M 200,200 0,200 0,0 200,0 z ;
M 200,0 200,200 0,200 00,0 z ;
M 100,0 200,200 0,200 50,100 z:"
keyTimes="0; .25; .5; .75; 1"
keySplines="1 0 1 1; 1 0 1 1; 1 0 1 1; 1 0 1 1;"
fill="freeze"
/>
</path>
</g>
<g>
<use xlink:href="#startText" x="150" y="160" style="font-size: 18pt; fill: white; stroke: none; font-family: Rockwell; text-anchor: middle;"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="morphMe.begin"/>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="morphMe.end+.5s"/>
</g>
</svg

Answer 1

You've got repeatCount="2" so change that to repeatCount="indefinite" and that should ensure your animation doesn't stop.
See the docs here; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/repeatCount

Answer 2

There seem to be two problems.
A semicolon has been mistyped as a colon in the animation
Fractional time offsets in SMIL must begin with a leading 0 (although Chrome does not enforce this)
I'd also probably just make the text and shape pointer-events: none since you don't want to manage clicks on them and just process clicks on the rect. I've also made that change below.
After that everything seems to work (at least on Firefox where I'm testing it).
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0 0 300 300">
<defs>
<text id="startText" pointer-events="none">CLICK ANYWHERE</text>
</defs>
<rect id="startMe" x="0" y="0" width="300" height="300" fill= "red"> </rect>
<g transform="translate(50, 50)" pointer-events="none">
<path d="M 100,0 200,200 0,200 50,100 z;" fill="green" stroke="black" stroke-linecap="round" stroke-width="32" stroke-linejoin="round" stroke-dasharray="68">
<animate id="morphMe"
restart="always"
begin="startMe.click"
attributeName="d"
dur="2s"
calcmode="spline"
repeatCount="2"
values=
"M 100,0 200,200 0,200 50,100 z ;
M 200,0 200,200 0,200 00,0 z ;
M 200,200 0,200 0,0 200,0 z ;
M 200,0 200,200 0,200 00,0 z ;
M 100,0 200,200 0,200 50,100 z;"
keyTimes="0; .25; .5; .75; 1"
keySplines="1 0 1 1; 1 0 1 1; 1 0 1 1; 1 0 1 1;"
fill="freeze"
/>
</path>
</g>
<g>
<use xlink:href="#startText" x="150" y="160" style="font-size: 18pt; fill: white; stroke: none; font-family: Rockwell; text-anchor: middle;"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="morphMe.begin"/>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="morphMe.end+0.5s"/>
</g>
</svg