I'm trying to add images to SVG paths as the title is saying.
I've made the following fiddle,
JSFiddle
I'd like to put images within the paths, like so,
(Green dots representing images)
so image
How would this be done? I tried adding images to the path, but they just didn't show up, obviously.
Code:
<svg width="175" height="175">
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
</svg>
Following the picture, you need to add 5 circles.
Each circle is rotated relative to the other by the same angle - 360/5 = 72
Create the first circle:
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
Use the command <use> to clone the circle and rotate it transform
=" rotate (deg x y) " to the desired angle relative to the first circle.
<svg width="175" height="175" >
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
<use xlink:href="#greenCircle" transform="rotate(-10 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(62 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(134 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(206 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(278 87.5 87.5)" />
</svg>
Here's a hint, add this to your fiddle:
<circle cx="0" cy="0" r="10" fill="#12345"></circle>
My goal here is to animate a rocket in my website.
It first take off then it moves a little bit on the spot on the top of the svg and then it take off for good, further. The two first steps are working well but the last one doesn't work. Maybe that's because i already assigned a transition at first to it. I achieve the first step by doing so:
$("#rocket", svgDoc).css({transform:"translateY(-720px)",transition:"6s"});
Then the second one is on the style part of svg file :
#rocket{
animation: fly 1s infinite alternate;
animation-delay: 6s;
}
#-webkit-keyframes fly {
100% {
transform : translateY(-10px);
}
}
#keyframes fly {
100% {
transform : translateY(-10px);
}
}
Then the third one , i tried it by attribute it a new class but the transition doesn't work. the translate part works good but not the animation:
.byebye{
transform : translateY(-400px);
transition : transform 2s;
}
Any thoughts ?
Here is a jsFiddle:
https://jsfiddle.net/yptn6ovd/1/
suggest decouple animate phrases, maybe svg tag better
still i made it work, rocket not showing in last phrase is a browser bug, need a time gap to fix it
jsfiddle
var svgDoc = $("#fusee")[0].contentDocument; // Get the document object for the SVG
$("#all", svgDoc).css({transform:"translateY(-720px)",transition:"6s"});
var nuages = $("#nuages");
var fusee = $("#fusee");
$("#nuages").fadeIn(9000);
setTimeout(function(){
fusee.addClass('fly');
},6000);
setTimeout( function() {
fusee.removeClass('fly');
setTimeout(function(){
fusee.addClass("byebye");
},50);//.addClass("byebye");
$("#logo").fadeIn(3000);
$("#bottom").css({transform:"translateY(-180px)", transition: "2s"});
}, 10000);
.st0{fill:#BF534F;}
.st1{fill:#FFC843;}
.st2{fill:#0071CE;}
.st3{fill:#333E48;}
.st4{fill:#08153a;}
.st5{fill:#A4A9AD;}
.st6{clip-path:url(#SVGID_2_);}
.st7{clip-path:url(#SVGID_4_);fill:#F1F1F1;}
.st8{clip-path:url(#SVGID_4_);fill:#E5E5E5;}
.st9{clip-path:url(#SVGID_6_);}
.st10{clip-path:url(#SVGID_8_);fill:#F1F1F1;}
.st11{clip-path:url(#SVGID_8_);fill:#E5E5E5;}
.st12{fill:#FFF200;}
.st13{fill:#6E8DC8;}
.st14{fill:#ED1C24;}
.st15{fill:#FFFFFF;}
#fusee{
}
.fly{
animation: fly 1s infinite alternate;
}
.byebye{
transform : translateY(-400px);
transition : transform 2s;
}
#-webkit-keyframes fly {
100% {
transform : translateY(-10px);
}
}
#keyframes fly {
100% {
transform : translateY(-10px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"
viewBox="-385.9 -215.9 625.5 976" style="enable-background:new -385.9 -215.9 625.5 976;" xml:space="preserve">
<g id="all">
<g id="fusee">
<path class="st0" d="M-52.2,707.8c2.9,0,20.5-1,23.9,14.5c2.7,12.2,3.6,18.7,12.3,18.7s12.4-7.3,8.7-29.5
c-3-18.2-5.4-30.5-44.9-30.5L-52.2,707.8L-52.2,707.8z"/>
<path class="st0" d="M-98.9,707.8c-2.9,0-20.5-1-23.9,14.5c-2.7,12.2-3.6,18.7-12.3,18.7c-8.7,0-12.4-7.3-8.7-29.5
c3-18.2,5.4-30.5,44.9-30.5V707.8z"/>
<g>
<path class="st1" d="M-53.5,721.3c0-12.2-9.9-22.1-22.1-22.1s-22.1,9.9-22.1,22.1s9.9,38.8,22.1,38.8
C-63.4,760.1-53.5,733.5-53.5,721.3z"/>
<path class="st0" d="M-64.8,720.7c0-6-4.8-10.8-10.8-10.8s-10.8,4.8-10.8,10.8c0,6,4.8,19,10.8,19
C-69.6,739.6-64.8,726.6-64.8,720.7z"/>
</g>
<path class="st2" d="M-45.1,713.8c7.6-28.7,14-77.5,14-97.6s-14.6-72-44.5-97.6c-29.9,25.6-44.5,77.5-44.5,97.6s6.5,68.9,14,97.6
H-45.1L-45.1,713.8z"/>
<path class="st3" d="M-111.1,690.9c1.6,8.3,3.3,16.1,5.1,22.8h60.9c1.8-6.7,3.5-14.5,5.1-22.8H-111.1z"/>
<path class="st0" d="M-75.6,518.6c-9.9,8.5-18.2,19.9-24.8,32.1h49.5C-57.4,538.5-65.6,527.1-75.6,518.6z"/>
<g>
<path class="st15" d="M-64.9,639.7c0-11.6,14.6-14.8,14.6-34.1c0-14-11.3-25.3-25.3-25.3s-25.3,11.3-25.3,25.3
c0,19.3,14.6,22.5,14.6,34.1H-64.9z"/>
<path class="st5" d="M-87.6,644.1c0,6.7,5.4,12.1,12.1,12.1c6.7,0,12.1-5.4,12.1-12.1H-87.6z"/>
<path class="st3" d="M-61.3,643c0-1.9-1.5-3.4-3.4-3.4h-21.8c-1.9,0-3.4,1.5-3.4,3.4v4.7c0,1.9,1.5,3.4,3.4,3.4h21.8
c1.9,0,3.4-1.5,3.4-3.4L-61.3,643L-61.3,643z"/>
</g>
</g>
<g id="bottom">
<g id="nuages" style="display:none;">
<g>
<defs>
<polygon id="SVGID_1_" points="-389.2,1587 235.6,1582.4 230,1139.4 -394.7,1144 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st6">
<defs>
<polygon id="SVGID_3_" points="-389.2,1587 235.6,1582.4 230,1139.4 -394.7,1144 "/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<path class="st7" d="M-119.2,1580l0.7,5l-0.5-5.1C-119,1580-119.1,1580-119.2,1580z"/>
<path class="st7" d="M-110.3,1565.2l0.4,3.5l-0.3-4C-110.2,1564.9-110.3,1565.1-110.3,1565.2z"/>
<path class="st7" d="M-69.3,1514.8l0.1,9.9l0.2-10.2C-69.1,1514.6-69.2,1514.7-69.3,1514.8z"/>
<path class="st7" d="M-77.7,1523.2l0.2,7.2l0-7.4C-77.5,1523.1-77.6,1523.2-77.7,1523.2z"/>
<path class="st7" d="M-16,1395.6c-0.4-0.1-0.8-0.1-1.2-0.3l0,0.2c0.4,1.3,0.7,2.7,1,4C-16.2,1398.2-16.1,1396.9-16,1395.6z"/>
<path class="st7" d="M123.2,1184c-4,0-7.6,1.8-10.7,4.8c-26.5-15.3-98.4-25.9-182.8-25.3c-93.7,0.7-171.6,14.9-189.1,33.3
c-2.3-0.7-4.8-1.1-7.3-1c-17.4,0.1-31.2,18.5-30.9,41.1c0.3,22.6,14.6,40.8,32,40.7c7.5-0.1,14.3-3.5,19.7-9.3
c3.2,7.5,8.3,12.8,14.2,14.3c3.9,27.7,20.3,48.5,39.7,48.3c0.9,0,1.9-0.1,2.8-0.2c4,35.8,22.4,64.3,45.8,71.6l0.4,3.2
c5.2-2.5,14.2-1.8,20.8-1.2c0.3-0.1,0.6-0.2,0.9-0.2l-0.1-1.2c16.3-4.4,30.1-19.2,38.4-39.7c0.3,0.2,0.7,0.3,1,0.5l0.1,3.2
c0.2-0.1,0.4-0.2,0.6-0.3c1.4-0.6,2.8-1,4.2-1.2l0-0.2c0.3,0,0.6,0.1,0.9,0.1c1.3-0.2,2.5-0.1,3.6,0c0.3,0,0.6-0.1,0.8-0.1
c0.7-0.6,1.7-1.1,3-1.3c1.2-0.2,2.3-0.3,3.4-0.4l0-0.6c8-4.6,14-15.2,15.8-28.2c4.4,3.7,9.5,5.8,14.9,5.7
c2.4,0,4.8-0.5,7.1-1.3l0,0.8c0.3-0.2,0.7-0.4,1.1-0.6c1.6-0.8,3.7-0.8,5.5-0.3c0.5-0.9,1.5-1.7,2.7-2.2l0.3-4
c1.8-1.9,3.5-4.1,5.1-6.5l-0.6,9.8c0.7,0.1,1.3,0.3,2,0.5c3,1.3,5.2,3.3,6.7,5.7l0.4-4.1c8,16.1,20.8,26.5,35.1,26.4
c23.8-0.2,42.8-29.4,42.3-65.3c-0.1-8.3-1.3-16.3-3.2-23.6c4.2,3.3,8.9,5.1,13.9,5.1c15.8-0.1,28.4-18.9,28.8-42.3
c3.3,3.6,7.4,5.6,11.7,5.6c11-0.1,19.7-13.6,19.5-30.1C143.3,1197.2,134.2,1183.9,123.2,1184z M-159.1,1239.7
c-0.1-0.3-0.2-0.5-0.3-0.8c0.4,0,0.8,0.1,1.1,0.1C-158.6,1239.3-158.9,1239.5-159.1,1239.7z"/>
<path class="st7" d="M-28.3,1578.4l-0.4,5.9l0.6-6.1C-28.2,1578.3-28.2,1578.4-28.3,1578.4z"/>
<path class="st8" d="M-339.5,1143.6l510.6-3.7c2.5,5.5,3.9,11.5,4,17.9c0.3,25.5-21.1,46.3-47.8,46.5c-4.5,0-8.8-0.5-13-1.6
c-2.7,25.3-16.9,44.7-34.3,44.8c-2.2,0-4.3-0.3-6.3-0.8c-7.5,25.3-25.3,43.2-46.3,43.3c-17.9,0.1-33.7-12.6-43.1-31.9
c-4.4,4.5-9.7,7.1-15.5,7.2c-11.4,0.1-21.3-9.9-25.7-24.3c-13.6,22.4-34.3,36.7-57.7,36.8c-29.1,0.2-54.6-21.6-67.7-53.7
c-4.8,4.8-10.4,7.5-16.4,7.6c-9.2,0.1-17.5-6.1-23.4-16.1c-10.6,16.3-28.3,27.1-48.3,27.2c-33,0.2-60.1-28.2-60.6-63.5
c-0.1-7.7,1.1-15.1,3.3-21.9C-333.2,1153.3-337.2,1148.7-339.5,1143.6"/>
</g>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-391.9" y="708.1" width="624.8" height="443"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
<g class="st9">
<defs>
<rect id="SVGID_7_" x="-391.9" y="708.1" width="624.8" height="443"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
<path class="st10" d="M125.5,1047.4c-4.4,0-8.4,2.1-11.7,5.7c-0.7-23.5-13.6-42.1-29.4-42.1c-5,0-9.7,1.9-13.8,5.2
c1.9-7.3,2.9-15.3,2.9-23.6c0-35.9-19.3-65-43.1-65c-14.3,0-27,10.5-34.8,26.6l-27.1-246.1l18.8,258.1
c-1.6-2.4-3.3-4.6-5.2-6.4l-22.4-235.5l12.8,229.2c-2.3-0.8-4.6-1.3-7.1-1.3c-5.4,0-10.4,2.1-14.8,5.8
c-1.9-12.9-8-23.5-16.1-28l-5.9-162l1,160.1c-1.4-0.3-2.8-0.5-4.2-0.5c-0.9,0-1.8,0.1-2.7,0.2l-2.4-165.4L-82,929.3
c-0.3,0.2-0.7,0.3-1,0.5c-8.5-20.4-22.5-35.1-38.9-39.4l9.4-166.1L-130,889.2c-0.6,0-1.2,0-1.8,0c-1.2,0-2.3,0.1-3.5,0.2
l14.1-181.2L-143.9,891c-23.3,7.5-41.3,36.1-44.9,71.9c-0.9-0.1-1.9-0.2-2.8-0.2c-19.4,0-35.5,20.9-39.1,48.6
c-5.8,1.5-10.9,6.9-14,14.4c-5.4-5.7-12.3-9.1-19.8-9.1c-17.4,0-31.4,18.3-31.4,40.9c0,22.6,14.1,40.9,31.4,40.9
c2.5,0,4.9-0.4,7.2-1.1c17.7,18.2,95.8,31.9,189.5,31.9c84.4,0,156.2-11.1,182.5-26.6c3.1,3,6.8,4.7,10.7,4.7
c11,0,19.9-13.4,19.9-30C145.4,1060.9,136.5,1047.4,125.5,1047.4 M-157.9,1054.4c0.1-0.3,0.2-0.5,0.3-0.8
c0.3,0.2,0.5,0.4,0.8,0.6C-157.1,1054.4-157.5,1054.4-157.9,1054.4"/>
<path class="st11" d="M-336.8,1151.1h510.6c2.4-5.5,3.8-11.6,3.8-17.9c0-25.5-21.7-46.2-48.4-46.2c-4.5,0-8.8,0.6-12.9,1.7
c-3-25.3-17.5-44.5-34.9-44.5c-2.2,0-4.3,0.3-6.3,0.9c-7.8-25.3-25.9-43-46.9-43c-17.9,0-33.6,12.8-42.7,32.2
c-4.4-4.5-9.8-7.1-15.6-7.1c-11.4,0-21.2,10.1-25.4,24.5c-13.9-22.3-34.8-36.4-58.1-36.4c-29.1,0-54.4,22-67.1,54.2
c-4.8-4.7-10.5-7.4-16.5-7.4c-9.2,0-17.4,6.2-23.2,16.2c-10.8-16.2-28.6-26.9-48.7-26.9c-33,0-59.8,28.6-59.8,64
c0,7.7,1.3,15,3.6,21.9C-330.6,1141.3-334.5,1146-336.8,1151.1"/>
</g>
</g>
</g>
<g id="logo" style="display:none">
<g>
<polygon class="st4" points="-256,1116.5 -247.7,1098.8 -257.7,1098.8 -267.7,1098.8 -259.4,1116.5 -270.7,1165.5 -257.7,1207
-244.7,1165.5 "/>
<g>
<path class="st12" d="M-226.2,1214.1c14,0,18.2-3.3,18.2-11.6v-32.7c0-10.1,0.3-13.6,9.4-18.7c-7.8-4.4-9.4-9.2-9.4-18.5v-32.9
c0-8.3-4.3-11.6-18.2-11.6v-6.8c0,0,8.9,0,11.6,0.4c11.8,1.5,14.5,11.1,14.5,21.4v29.7c0,6.7,0.2,10,7.2,14.6l5.4,3.7l-5.3,2.5
c-9,4.4-7.2,10.2-7.2,16.9v28.5c0,10.3-2.6,19.9-14.5,21.4c-2.6,0.4-11.6,0.4-11.6,0.4V1214.1z"/>
<path class="st13" d="M-226.2,1214.1c14,0,18.2-3.3,18.2-11.6v-32.7c0-10.1,0.3-13.6,9.4-18.7c-7.8-4.4-9.4-9.2-9.4-18.5v-32.9
c0-8.3-4.3-11.6-18.2-11.6v-6.8c0,0,8.9,0,11.6,0.4c11.8,1.5,14.5,11.1,14.5,21.4v29.7c0,6.7,0.2,10,7.2,14.6l5.4,3.7l-5.3,2.5
c-9,4.4-7.2,10.2-7.2,16.9v28.5c0,10.3-2.6,19.9-14.5,21.4c-2.6,0.4-11.6,0.4-11.6,0.4V1214.1z"/>
<path class="st14" d="M-289.2,1220.9c0,0-8.9,0-11.6-0.4c-11.8-1.5-14.5-11.1-14.5-21.4v-28.5c0-6.8,1.8-12.5-7.2-16.9
l-5.3-2.5l5.4-3.7c7-4.7,7.2-8,7.2-14.6v-29.7c0-10.3,2.6-19.9,14.5-21.4c2.6-0.4,11.6-0.4,11.6-0.4v6.8
c-14,0-18.2,3.3-18.2,11.6v32.9c0,9.3-1.6,14.1-9.4,18.5c9.2,5.2,9.4,8.7,9.4,18.7v32.7c0,8.3,4.3,11.6,18.2,11.6V1220.9z"/>
<path class="st13" d="M-289.2,1220.9c0,0-8.9,0-11.6-0.4c-11.8-1.5-14.5-11.1-14.5-21.4v-28.5c0-6.8,1.8-12.5-7.2-16.9
l-5.3-2.5l5.4-3.7c7-4.7,7.2-8,7.2-14.6v-29.7c0-10.3,2.6-19.9,14.5-21.4c2.6-0.4,11.6-0.4,11.6-0.4v6.8
c-14,0-18.2,3.3-18.2,11.6v32.9c0,9.3-1.6,14.1-9.4,18.5c9.2,5.2,9.4,8.7,9.4,18.7v32.7c0,8.3,4.3,11.6,18.2,11.6V1220.9z"/>
<path class="st4" d="M-136.2,1138.5v4c-2.1-1.8-4.5-2.7-7.4-2.7c-3.1,0-5.7,1.1-7.8,3.4c-2.1,2.2-3.2,4.9-3.2,8.1
c0,3.1,1.1,5.7,3.2,8c2.1,2.2,4.7,3.4,7.8,3.4c2.8,0,5.3-1,7.4-2.9v4.1c-2.2,1.3-4.7,2-7.3,2c-4,0-7.4-1.4-10.3-4.2
c-2.9-2.8-4.3-6.2-4.3-10.2c0-4.1,1.4-7.6,4.3-10.4c2.9-2.8,6.4-4.3,10.5-4.3C-140.6,1136.6-138.3,1137.3-136.2,1138.5"/>
<path class="st4" d="M-122.3,1140.9c2.9-2.9,6.3-4.3,10.3-4.3c4,0,7.4,1.4,10.3,4.3c2.9,2.9,4.3,6.3,4.3,10.3
c0,4.1-1.4,7.6-4.3,10.4c-2.8,2.8-6.3,4.2-10.4,4.2s-7.5-1.4-10.4-4.2c-2.8-2.8-4.3-6.2-4.3-10.4
C-126.6,1147.2-125.2,1143.8-122.3,1140.9 M-119.8,1159.2c2.2,2.2,4.8,3.3,7.9,3.3c3,0,5.7-1.1,7.9-3.3c2.2-2.2,3.3-4.9,3.3-8
c0-3.1-1.1-5.8-3.2-8c-2.1-2.2-4.8-3.3-8-3.3c-3.2,0-5.9,1.1-8,3.3c-2.1,2.2-3.2,4.9-3.2,8
C-123.1,1154.4-122,1157-119.8,1159.2"/>
<path class="st4" d="M-86.8,1165.2v-27.9h5.8c4.5,0,8.3,1.2,11.2,3.6c3,2.4,4.4,5.8,4.4,10.2c0,4.6-1.5,8.1-4.4,10.5
c-2.9,2.4-6.7,3.6-11.4,3.6H-86.8z M-83.4,1140.4v21.6h1.2c1.9,0,3.6-0.2,5.1-0.6c1.5-0.4,2.9-1,4.2-1.8
c1.2-0.8,2.2-1.9,2.9-3.4c0.7-1.4,1.1-3.1,1.1-5.1c0-2-0.4-3.7-1.1-5.1c-0.7-1.4-1.7-2.6-2.9-3.4c-1.3-0.8-2.6-1.4-4.2-1.8
c-1.5-0.4-3.2-0.6-5.1-0.6H-83.4z"/>
<polygon class="st4" points="-54.5,1165.2 -54.5,1137.2 -39.5,1137.2 -39.5,1140.4 -51,1140.4 -51,1148.2 -39.8,1148.2
-39.8,1151.4 -51,1151.4 -51,1162 -39.5,1162 -39.5,1165.2 "/>
<rect x="-9.8" y="1137.2" class="st13" width="3.5" height="27.9"/>
<polygon class="st13" points="6,1165.2 6,1135.9 27,1157.9 27,1137.2 30.5,1137.2 30.5,1166.3 9.5,1144.3 9.5,1165.2 "/>
<path class="st13" d="M58,1140.9l-2.8,1.7c-1-1.8-2.5-2.6-4.5-2.6c-1.2,0-2.3,0.4-3.2,1.1c-1,0.7-1.4,1.7-1.4,2.9
c0,1.7,1.3,3,3.9,4l2,0.8c2.2,0.9,3.9,1.9,5.1,3.2c1.2,1.3,1.8,3,1.8,5.2c0,2.5-0.9,4.6-2.6,6.2c-1.7,1.6-3.8,2.5-6.4,2.5
c-2.2,0-4.2-0.7-5.8-2.2c-1.6-1.5-2.6-3.3-2.9-5.6l3.5-0.7c0,1.5,0.5,2.8,1.5,3.8c1,1,2.3,1.5,3.9,1.5c1.5,0,2.7-0.5,3.7-1.6
c1-1.1,1.5-2.4,1.5-3.8c0-1.4-0.4-2.4-1.3-3.2c-0.9-0.8-2-1.5-3.5-2.1l-1.9-0.8c-1.9-0.8-3.4-1.8-4.5-2.8
c-1.1-1.1-1.6-2.5-1.6-4.3c0-2.2,0.8-3.9,2.4-5.2c1.6-1.3,3.6-2,5.8-2C54,1136.6,56.4,1138,58,1140.9"/>
<rect x="70" y="1137.2" class="st13" width="3.5" height="27.9"/>
<path class="st13" d="M85.9,1165.2v-27.9h5.8c4.5,0,8.3,1.2,11.2,3.6c3,2.4,4.4,5.8,4.4,10.2c0,4.6-1.5,8.1-4.4,10.5
c-2.9,2.4-6.7,3.6-11.4,3.6H85.9z M89.3,1140.4v21.6h1.2c1.9,0,3.6-0.2,5.1-0.6c1.5-0.4,2.9-1,4.2-1.8c1.2-0.8,2.2-1.9,2.9-3.4
c0.7-1.4,1.1-3.1,1.1-5.1c0-2-0.4-3.7-1.1-5.1c-0.7-1.4-1.7-2.6-2.9-3.4c-1.3-0.8-2.6-1.4-4.2-1.8c-1.5-0.4-3.2-0.6-5.1-0.6
H89.3z"/>
<polygon class="st13" points="118.2,1165.2 118.2,1137.2 133.2,1137.2 133.2,1140.4 121.7,1140.4 121.7,1148.2 132.9,1148.2
132.9,1151.4 121.7,1151.4 121.7,1162 133.2,1162 133.2,1165.2 "/>
<path class="st13" d="M153.5,1153l8.8,12.2h-4.2l-8.2-11.8h-1.4v11.8h-3.5v-27.9h4.2c1.1,0,1.9,0,2.6,0.1
c0.7,0,1.4,0.2,2.4,0.4c0.9,0.2,1.7,0.5,2.4,0.9c1.1,0.7,2,1.6,2.7,2.8c0.7,1.2,1,2.5,1,3.9c0,2-0.6,3.8-1.9,5.2
C157.1,1151.9,155.5,1152.8,153.5,1153 M148.4,1140.3v10.1h1.1c1,0,1.9-0.1,2.7-0.2c0.8-0.1,1.5-0.4,2.3-0.7
c0.8-0.3,1.4-0.9,1.8-1.6c0.4-0.7,0.6-1.6,0.6-2.7c0-3.3-2.5-5-7.6-5H148.4z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Not getting the third part after watching the fiddle.. However, try
Put this inside a class
{transform:"translateY(-720px)",transition:"6s"}
and remove that class before adding byebye class to element.
Just remove animation:infinite looping from your #fusee. Even you can remove animation-direction:alternate as we don't want it to perform reverse action. Mainly animation loop was creating that issue.
#fusee{
animation: fly 1s;
animation-delay: 6s;
}