I would like a polygon in a SVG file to translate top down and fade in and then stops. I encountered few problems though. If is set the “begin” attribute, a weird behavior occurs. For the translation part: . For the opacity part: the “to” attribute doesn’t work when I set it to a floated value, such as “0.1”.
<polygon fill="rgb(255,255,255)" points="15,22 79,22 84,32 65,32 25,32">
<animateTransform attributeType="xml"
attributeName="transform"
type="translate"
from="0,-20"
to="0,0"
begin="2s"
dur=".5s" />
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0.1"
begin="2s"
dur="0.5s" />
</polygon>
Can you shed some light? Thank you.