SVGアニメーションバウンス矢印

Question

I以下のSVGあります

<?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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve"> 
 

 
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 " /> 
 

 
</svg>

は、私はこれがアニメーション作りたい - 矢印が "この道"

Iのようにバウンスされるようにオンラインで見ていて、これを行う例は見つけられないようです。誰もこれを行う方法を提案することはできますか？ jQueryやCSSだけで純粋なSVGを使用していないのですか？

EDIT：

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve"> 
 

 
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 "> 
 

 
<animateMotion path="M 0 0 V 300 Z" dur="20s" repeatCount="indefinite" /> 
 
</polygon> 
 
</svg>

あなたが見ることができるように、矢印が画面から出て、いくつかの時間のために戻って来ません。私はちょうど上下に跳ね、画面を残さないためにそれが必要ですか？

Answer 1

移動を少なくしたい場合は、Vを調整して遠くまで移動しないようにします。

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve"> 
 

 
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 "> 
 

 
<animateMotion path="M 0 0 V 20 Z" dur="20s" repeatCount="indefinite" /> 
 
</polygon> 
 
</svg>