通过设置不透明度淡入图像

Question

我需要淡入动画前2秒看不见的图像。

这就是我现在所拥有的：

     <image x="40%" y="40%" width="30%" height="30%" id="img2"
   opacity="1"

   preserveAspectRatio="xMinYMin meet"
     xlink:href="img/2dugs.jpg" >
     <animate attributeName="opacity" 
   attributeType="CSS" 
   begin="2s" dur="2s" from="0" to="1" 
   repeatCount="1" />

     </image>

使用此代码，图像在动画开始时可见，我不想要。如果我设置opacity =“0”，则开始没问题：图像在前2秒内没有消失，在2秒内消失，但最后再次看不见。

如何获得一个动画：前2秒内图像不可见，然后在2秒内淡入然后保持可见？

Answer 1

将fill="freeze"添加到<animate>代码并生成<image ... opacity="0">。