如何使用jQuery使SVG逐渐朝某个角度出现？

考虑下面的SVG三角形。我可以让它从左到右显示如下：

$（文档）.ready（函数（）{
$（“#图像”）。设置动画({
宽度：200
}, 2000);
});
您可以使用SMIL动画。因为使用此技术，直接在SVG中链接动画非常简单：



查看第二个动画的
begin=“first.end”
属性。这是SMIL用来表示这个动画必须在另一个动画（我称之为
第一个
）结束时开始的方式。
试着这样做：
begin=“first.end-1s”
使用CSS。你能给我一些指导吗？我只在非常简单的任务中使用CSS转换。如果我只希望元素以jQuery动画的特定顺序出现，它会起作用吗？（例如，让三角形1出现，然后是三角形2，等等）谢谢你的回答，它并不能解决问题，但我对SMIL动画并不陌生。无论如何，你的例子允许我旋转三角形，但我需要的是使它逐渐出现。位置必须始终固定。另外，我应该能够通过jQuery触发效果。
<svg id="image" height="300" width="300" viewBox="-50 -50 400 400">
  <polygon points="0,300 100,200 100,300" fill="yellow" stroke="black">
    <animateTransform
        attributeName="transform"
        id="first"
        begin="0s"
        dur="2s"
        type="rotate"
        from="0 100 300"
        to="90 100 300"
        fill="freeze"
        repeatCount="1" />    
  </polygon>
  <polygon points="200,300 300,200 300,300" fill="green" stroke="black">
    <animateTransform
        attributeName="transform"
        begin="first.end"
        dur="1s"
        type="rotate"
        from="0 200 300"
        to="-90 200 300"
        fill="freeze"
        repeatCount="1" />    
  </polygon>
</svg>