0
我有以下SVG: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>
我想使这个动画 - 使箭头是弹跳像“这样”
我网上看起来,我似乎无法找到任何这样做的例子。任何人都可以提出一种做法吗?不使用jQuery或CSS只是纯粹的SVG?
编辑:
<?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>
正如你所看到的,箭头离开屏幕,并且不回来一段时间。我只是需要它上下跳动而不离开屏幕?
使用SMIL animateTransform动画多边形一个翻译。 –
@RobertLongson你有一个例子,对不起?我按照你的建议教程:' '我只需要动画上去而不是跨越? –
Phorce
V 300而不是H 300然后 –