SVGアニメーション往復？

Question

私は自分のsvgをonclickに縮小し、縮小時にはクリックで拡大したいと思っています。

これはどのように達成できますか？私はJavascriptでいくつかのものを試しましたが、簡単な方法を見つけることができませんでした。

たとえば、このSVG：

<svg id="MyRect" width="100" height="100" viewbox="0 0 100 100"> 
     <polygon fill="#000000" points="0,0 0,100 100,100 100,0"> 
      <animate id="shrink" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="0,0 0,100 100,100 100,0" to="30,30 30,70 70,70 70,30" fill="freeze" /> 
      <animate id="grow" attributeName="points" begin="undefined" restart="whenNotActive" dur="1s" from="30,30 30,70 70,70 70,30" to="0,0 0,100 100,100 100,0" fill="freeze" /> 
     </polygon> 
    </svg> 

は、どのように私は彼の「状態」に応じてアニメーションやその他をトリガするために管理することはできますか？

ありがとうございました。

Answer 1

純粋なSMILでクリックするたびにアニメーションを変更することはできませんので、アニメーションの異なる2つのポリゴン間を入れ替えます。私のソリューションにはjavascriptは必要ありません。

<svg id="MyRect" width="100" height="100" viewBox="0 0 100 100"> 
 
     <polygon fill="#000000" points="0,0 0,100 100,100 100,0"> 
 
      <animate id="shrink" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="30,30 30,70 70,70 70,30" fill="freeze" /> 
 
      <set attributeName="display" begin="shrink.end" to="none" /> 
 
      <set attributeName="display" begin="grow.end" to="block" /> 
 
      <set attributeName="points" begin="grow.end" to="0,0 0,100 100,100 100,0" /> 
 
     </polygon> 
 
     <polygon fill="#000000" points="30,30 30,70 70,70 70,30" display="none"> 
 
      <animate id="grow" attributeName="points" begin="click" restart="whenNotActive" dur="1s" to="0,0 0,100 100,100 100,0" fill="freeze" /> 
 
      <set attributeName="display" begin="grow.end" to="none" /> 
 
      <set attributeName="display" begin="shrink.end" to="block" /> 
 
      <set attributeName="points" begin="grow.end" to="30,30 30,70 70,70 70,30" /> 
 
     </polygon> 
 
    </svg>