SVG set attributeName = "visibility" fonctionne la première fois, mais pas après

Question

Dans ce qui suit, le texte (CLICK ME) est censé réapparaître 0,5 seconde après la fin de l'animation morphMe. (Voir la dernière ligne de code autre que la fermeture des étiquettes)

Cela fonctionne bien, faisant apparaître le texte la première fois que l'animation se termine. Mais ça ne marche jamais après ça. Je ne peux pas comprendre pourquoi cela ne fonctionne qu'une fois;

<?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

Vous avez repeatCount="2" donc changer cela à repeatCount="indefinite" et qui devrait assurer l'animation ne s'arrête pas.

Voir les documents ici; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/repeatCount

Answer 2

Il semble y avoir deux problèmes.

• Un point-virgule a été mal orthographié comme deux points dans l'animation
• décalages temporels fractionnaires SMIL doit commencer par un 0 (bien que Chrome n'applique pas)

Je voudrais aussi probablement faites simplement le texte et formez les événements-pointer: none puisque vous ne voulez pas gérer les clics sur eux et ne faites que cliquer sur le rect. J'ai également fait ce changement ci-dessous. Après quoi tout semble fonctionner (du moins sur Firefox où je le teste).

<?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