SVG set 属性名称= "visibility"第一次工作，但之后就不工作了

Question

在下面，文本（单击我）应该在morphMe动画结束后重新出现.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="2"，因此将其更改为repeatCount="indefinite"，这应该确保您的动画不会停止。

请参阅此处的文档；https://developer.mozilla.org/en-us/docs/web/svg/attribute/repeatcount

Answer 2

似乎有两个问题。

• 半分号被误认为是动画中的结肠
• SMIL中的分数时间偏移必须以领先0开始（尽管Chrome不强制执行此功能）

我也可能只是制作文本和形状指针事件：没有一个，因为您不想管理它们的点击，而只需处理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