SVG Animate Prellen Pfeil

Question

Ich habe folgendes 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>

Ich möchte diese animiert machen - so dass der Pfeil wie ein "Auf diese Weise" Prellen

I habe online geschaut und ich kann keine Beispiele finden, die das tun. Kann jemand einen Weg vorschlagen, dies zu tun? Nicht mit jQuery oder CSS nur reines 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>

Wie Sie sehen können, der Pfeil auf den Bildschirm verlässt und kommt nicht wieder für einige Zeit. Ich brauche es nur, um auf und ab zu hüpfen und nicht den Bildschirm zu verlassen?

Answer 1

Wenn Sie möchten, dass es sich weniger bewegt, stellen Sie das V so ein, dass es nicht so weit geht.

<?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>