Question

在下文中，morphMe动画结束后，文本（CLICK ME）应该重新出现.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上）。

＆＃13;

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

＆＃13;

SVG设置attributeName =＆＃34;可见性＆＃34;第一次工作，但不是在那之后

2 个答案: