SVGセットのattributeName = "visibility"は最初に動作しますが、それ以降ではありません

Question

morphMeアニメーションが終了した後、テキスト（CLICK ME）が0.5秒後に再び表示されるはずです。 （終了タグ以外のコードの最後の行を参照してください）

アニメーションが初めて終了したときにテキストが表示されるようにしても問題ありません。しかし、それ以降はそれは機能しません。私はなぜそれが一度しか働かないのか理解できません。

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

あなたはとてもrepeatCount="indefinite"にそれを変更repeatCount="2"を持っているし、それはあなたのアニメーションが停止しないようにする必要があります。

ここにあるドキュメントを参照してください。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/repeatCount

Answer 2

2つの問題があるようです。

• セミコロンは、私はおそらくもしたい先頭の0（クロームはこれを強制することはありませんが）

で開始する必要があります

フラクショナル時間オフセットSMILアニメーションでコロンとしてタイプミスされています単にテキストと形状のポインタイベント：なしを作成します。なぜなら、それらのクリックを管理する必要がなく、rectのクリックだけを処理するからです。私もその変更を以下にしました。

その後、すべてがうまくいくように見えます（少なくとも私がテストしているところではFirefox上で）。

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