В продолжение темы анимации, мой друг посмотрел на все это хозяйство сказал ну его нафиг, будем делать все через CSS. В итоге SVG приобрел такой вид:
Код:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
#rectangle {
width:40px;
height:40px;
}
#rectangle.Start{
-webkit-animation: shakeY 2s infinite linear;
}
@keyframes shakeY {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
]]>
</style>
<g id="rectangle">
<rect x="10" y="10" width="40" height="40" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
</g>
</svg>
Сама прыгалка shakeY найдена на просторах интернета, немного поправим XMLку:
Код:
<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
<ParameterDefs>
<ParameterDef Name="Jump" DisplayName="Прыгать" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
<Value DisplayName="Выкл">Stop</Value>
<Value DisplayName="Вкл">Start</Value>
</ParameterDef>
</ParameterDefs>
</SvgDef>
Ну и далее все как обычно Новое окно, Импорт SVG, вставляем куда нужно, привязываем параметр. И вуаля.