SVG: transition , animation and then another transition doesn't work - javascript
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;
}
Related
Problem While animating an svg point using tranform translate X
I'm trying to make a simple animation using translate X on a segment of my svg (while hover on the element). This is my code:
<html>
<style>
.big-dot:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style>
<body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>
</html>
While hovering, the dot is doing a move on the Y axis instead and disappear. How Shall i tackle this? Also, is there a way I could use gsap to animate this considering this svg is inside a css class on a backround image ? Thanks
the issue you're having is that you've selected the wrong element, please select the circle itself, not the group it belongs to, your element is named #Path_277.
<style>
#Path_277:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style>
<body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>
Svg circular slider color changing
I have following svg and i want to create a circular slider, and the problem is i can't found anything related to changing stroke color of part of image. <svg width="221px" height="221px" viewBox="0 0 221 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <pattern id="pattern" width="100%" height="100%"> <path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z" id="path-1"></path> <use xlink:href="#path-1"></use> </mask> </pattern> <defs> <path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z" id="path-1"></path> <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="221" height="221" fill="white"> <use xlink:href="#path-1"></use> </mask> </defs> <g id="Final" stroke="none" stroke-width="1" fill="url(#psattern)" fill-rule="evenodd" opacity="0.69921875" stroke-dasharray="1,4"> <g id="voor" transform="translate(-77.000000, -230.000000)" stroke="#F5A623" stroke-width="48"> <g id="fi-strokes" stroke-width="48"> <g id="Gup" transform="translate(0.000000, -44.000000)"> <g id="Gup-5" transform="translate(20.000000, 111.000000)"> <g id="rp-4"> <g id="und" transform="translate(57.000000, 163.000000)"> <g id="reen"> <g id="Dl"> <g id="faded-ts"> <use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use> </g> </g> </g> </g> </g> </g> </g> </g> </g> </g> </svg> How to change part of image on mouse/touch events to another color? I tried: clip-path - i couldn't create smooth color changing. linear-gradient - same problem Any Tips?
Trying to create two arrays based on the tags in an SVG file
I have an SVG file of the USA and I am trying to make arrays out of the states and regions that I get from the ID and Class tags. I'm working in php and js. I have to pull the file into my map.php file which I did using file_get_contents(usa.svg). I sort of want it to be formatted like json data. I included some of the SVG file to show what I am trying to do. Any help is appreciated thanks. If possible I am trying to make the region array sort of like a dictionary with the states as the value of the region (the key).
Code below:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 889.43 574.7">
<defs>
<style>
.northEast,
.south,
.southWest,
.middleWest,
.farWest,
.cls-2 {
fill: #303a56;
}
.northEast,
.south,
.southWest,
.middleWest,
.farWest {
stroke: #fffaf3;
stroke-width: 1px;
}
.cls-2,
.cls-3 {
stroke: #303a56;
}
.cls-2 {
opacity: 0.1;
}
.cls-3 {
fill: none;
opacity: 0.2;
}
</style>
</defs>
<title>USMap</title>
<g id="map">
<g id="northEast">
<g id="newHampshire">
<path id="newHampshire_" data-name="NH" class="northEast" d="M924.22,441.8l0.73-.9,0.91-2.75-2.13-.76-0.41-2.57-3.25-.95-0.27-2.3-6.09-19.62-3.85-12.17h-0.75l-0.54,1.35-0.54-.41-0.81-.81L906,401.53l0,4.21,0.26,4.74,1.62,2.3v3.38l-3.11,4.24-2.16.95v0.95l0.95,1.49V431l-0.68,7.71-0.14,4.06,0.81,1.08-0.14,3.79L903,449.09l0.81,0.59,14.05-3.7,1.82-.5,1.54-2.32,3-1.35h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="vermont">
<path id="vermont_" data-name="VT" class="northEast" d="M893.82,451.54l0.27-4.47-2.42-9-0.54-.27-2.44-1.08,0.68-2.44-0.68-1.76-2.26-3.88,0.81-3.25L886.56,421l-2-5.41-0.67-4.12L906,405.86l0.26,4.62,1.6,2.3v3.38l-3.1,4.23-2.16,1v0.94l1.1,1.27-0.26,6.78-0.51,7.75-0.19,4.65,0.81,1.08-0.14,3.83L903,449.06l0.85,0.61-6.23,1.26-3.77.61h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="maine">
<path id="maine_" data-name="ME" class="northEast" d="M959.4,388.57l1.62,1.76,1.89,3.11v1.62L961.16,399l-1.62.54-2.84,2.57-4.06,4.6h-1.08c-0.54,0-.81-1.76-0.81-1.76l-1.49.14-0.81,1.22-2,1.22-0.81,1.22L947,410l-0.41.54-0.41,2.3-1.62-.14v-1.35l-0.27-1.08-1.22.27-1.49-2.71-1.76,1.08,1.08,1.22,0.27,0.95-0.68,1.08,0.27,2.57,0.14,1.35-1.35,2.17-2.44.41L936.81,421l-4.47,2.57-1.08.41-1.35-1.22-2.57,3,0.81,2.71-1.22,1.08-0.14,3.65-0.94,5.24-2.06-1-0.41-2.57-3.25-.95-0.27-2.3-6.09-19.62-3.93-12.25,1.19-.1L912.3,400v-2.17l1.1-3.76,2.16-3.92,1.22-3.38-1.62-2v-5l0.68-.81,0.68-2.3-0.14-1.22-0.14-4.06,1.49-4.06,2.44-7.44,1.76-3.52H923l1.08,0.14v0.95l1.08,1.89,2.3,0.54,0.68-.68V358.4l3.38-2.44,1.49-1.49,1.22,0.14,5,2,1.62,0.81,7.58,25h5l0.68,1.62,0.14,4.06,2.44,1.89h0.68l0.14-.41-0.41-.95,2.3-.14h0Zm-17.52,25.23,1.29-1.29,1.15,0.88,0.47,2-1.42.74Zm5.62-4.94,1.49,1.56s1.08,0.07,1.08-.2,0.2-1.69.2-1.69l0.74-.68-0.68-1.49-1.69.61Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="rhodeIsland">
<path id="rhodeIsland_" data-name="RI" class="northEast" d="M918.58,472.33l-3.09-12.52,5.25-1.54,1.83,1.61,2.77,3.62,2.25,3.68-2.51,1.36L924,468.4,923,469.89l-2,1.62-2.44.81h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="newYork">
<path id="newYork_" data-name="NY" class="northEast" d="M882,480.57l-0.95-.81-2.17-.14L877,478l-1.36-5.13-2.89.08-2-2.27-16.23,3.67-36,7.31-6.3,1-0.62-5.41,1.2-.94,1.08-.95,0.81-1.35,1.49-.95,1.62-1.49,0.41-1.35,1.76-2.3,0.95-.81-0.14-.81-1.08-2.57-1.49-.14-1.62-5.14L819,457l3.65-1.22,3.38-1.08,2.71-.41,5.28-.14,1.62,1.08,1.35,0.14,1.76-1.08,2.16-.95,4.33-.41,1.76-1.49,1.49-2.71,1.35-1.62h1.76l1.62-.95,0.14-1.89-1.22-1.76-0.27-1.22,0.95-1.76v-1.22h-1.49l-1.49-.68-0.68-.95L849,434.52l4.87-4.6,0.54-.68,1.22-2.44,2.44-3.79,2.3-3.11,1.76-2,2-1.53,2.58-1,4.6-1.08,2.71,0.14,3.79-1.22,6.33-1.73,0.44,4.17,2,5.41,0.68,4.33-0.81,3.25,2.16,3.79,0.68,1.76-0.68,2.44,2.44,1.08,0.54,0.27,2.57,9.2-0.45,4.24-0.41,9.07L894,465l0.68,3,1.22,6.09v6.77L895,482.73l1.54,1.67,0.67,1.4-1.62,1.49,0.27,1.08,1.08-.27,1.22-1.08,1.89-2.17,0.95-.54,1.35,0.54,1.89,0.14,6.63-3.25,2.44-2.3,1.08-1.22,3.52,1.35-2.84,3L911.81,485l-6,4.47-2.16.81-4.87,1.62-3.38.95-1-.45-0.2-3.09,0.41-2.3-0.14-1.76-2.35-1.42-3.79-.81-3.25-.95L882,480.57h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="pennsylvania">
<path id="pennsylvania_" data-name="PA" class="northEast" d="M877.61,510.66l1.1-.23,1.95-1,1-2.08,1.35-1.89,2.71-2.57v-0.68l-2-1.35-3-2-0.81-2.17-2.3-.27-0.14-.95-0.68-2.3,1.89-.95,0.14-2L877.75,489l0.14-1.35,1.62-2.57v-2.57l2.26-2.21-0.77-.56-2.11-.16L877,478l-1.3-5.12-2.93.08-2.06-2.26-15.14,3.51-36,7.31-7.44,1.22-0.52-5.46-4.49,4.24-1.08.41-3.52,2.52,2.44,16,2.08,8.14,3,16.12,2.74-.53,10-1.26,31.75-6.42,12.45-2.36,6.95-1.36,0.22-.2,1.76-1.35,1.76-.57h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="newJersey">
<path id="newJersey_" class="northEast" d="M881.43,480.33l-1.94,2.29v2.57l-1.62,2.57-0.14,1.35,1.08,1.08-0.14,2-1.89.95,0.68,2.3,0.14,0.95,2.3,0.27,0.81,2.17,3,2,2,1.35v0.68l-2.5,2.26-1.35,1.89-1.22,2.3-1.89,1.08-0.39,1.34-0.2,1L877.65,515l0.91,1.88,2.71,2.44,4.06,1.89,3.38,0.54,0.14,1.22-0.68.81,0.27,2.3h0.68l1.76-2,0.68-4.06,2.3-3.38,2.57-5.41,0.95-4.6-0.54-.95-0.14-7.85L895.34,495l-0.95.68-2.3.27-0.41-.41,0.95-.81,1.76-1.62,0.05-.92-0.32-2.87,0.48-2.3-0.1-1.65-2.35-1.47-4.26-1-3.46-1.16-3-1.38h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="connecticut">
<path id="connecticut_" class="northEast" d="M918.58,472.3l-3.08-12.45-3.95.77-17.77,4,0.84,2.7,1.22,6.09,0.15,7.51-1,1.82,1.61,1.62,3.58-3.27,3-2.71,1.62-1.76,0.68,0.54,2.3-1.22,4.33-.95,6.52-2.66h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="massachusetts">
<path id="massachusetts_" class="northEast" d="M940,467.61l1.82-.57,0.38-1.44,0.86,0.1,0.86,1.91-1.05.38-3.25.1,0.38-.48h0Zm-7.85.67,1.91-2.2h1.34l1.53,1.24-2,.86-1.82.86-1-.77h0ZM903,449.87L917.77,446l1.89-.54,1.6-2.34,3.13-1.39,2.42,3.69-2,4.33L924.51,451l1.62,2.17,0.95-.68h1.49l1.89,2.17,3.25,5,3,0.41,1.89-.81,1.49-1.49-0.68-2.3-1.76-1.35-1.22.68-0.81-1.08,0.41-.41,1.76-.14,1.49,0.68,1.62,2,0.81,2.44,0.27,2-3.52,1.22-3.25,1.62L932,466.92l-1.62,1.22v-0.81l2-1.22,0.41-1.49-0.68-2.57-2.44,1.22L929,464.49l0.41,1.89-1.73.84-2.3-3.79-2.84-3.65-1.73-1.52-5.47,1.57-4.26.88-17.31,3.84-0.56-4,0.54-8.86,3.59-.74,5.68-1.08h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
</g>
<g id="sp">
<path id="sp_" class="middleWest" d="M1943.38-909l1.53-1.72,1.82-.67,4.5-3.25,1.91-.48,0.38,0.38-4.31,4.31-2.77,1.63-1.72.77-1.34-1h0Zm72.13,26.89,0.54,2.1,2.71,0.14,1.08-1a2.83,2.83,0,0,0-.34-1.35,12.18,12.18,0,0,1-1.35-1.56l-1.83.2-1.35.14-0.27.95,0.81,0.41h0Zm-84-2.49,0.6-.49,2.3-.68,3-1.89v-0.81l0.54-.54,5-.81,2-1.62,3.65-1.76,0.14-1.08,1.62-2.44,1.49-.68,1.08-1.49,1.89-1.89,3.65-2,3.92-.41,0.95,0.95-0.27.81-3.11.81-1.22,2.57-1.89.68-0.41,2-2,2.71-0.27,2.17,0.68,0.41,0.81-.95,3-2.44,1.08,1.08h1.89l2.71,0.81,1.22,0.95,1.22,2.57,2.3,2.3,3.25-.14,1.22-.81,1.35,1.08,1.35,0.41,1.08-.68h0.95l1.35-.81,3.38-3,2.84-.95,5.55-.27,3.79-1.62,2.16-1.08,1.22,0.14v4.74l0.41,0.27,2.44,0.68,1.62-.41,5.14-1.35,0.95-.95,1.22,0.41v5.82l2.71,2.57,1.08,0.54,1.08,0.81-1.08.27-0.68-.27-3.11-.41-1.76.54-1.89-.14-2.71,1.22h-1.49l-4.87-1.08-4.33.14-1.62,2.17-5.82.54-2,.68-0.95,2.57-1.08.95-0.41-.14-1.22-1.35-3.79,2h-0.54l-0.95-1.35-0.68.14-1.62,3.65-0.81,3.38-2.66,5.86-1-.87-1.15-.86-1.62-8.61-3-1.15-1.72-1.91-10.14-2.3-2.39-.86-6.89-1.82-6.6-1-3.11-4.31h0Z" transform="translate(-1343.28 971.5)"/>
</g>
<g id="ohio">
<path id="ohio_" class="middleWest" d="M802.45,484.41l-5.1,3.39-3.25,1.89-2.84,3.11-3.38,3.25-2.71.68-2.44.41-4.6,2.17-1.76.14-2.84-2.57-4.33.54L767,496.19l-2-1.13-4.1.59L752.43,497,743,498.83l1.08,12.25,1.49,11.5,2.16,19.62,0.47,4,3.45-.11,2-.68,2.82,1.26,1.73,3.65h4.3l1.58,1.77,1.47-.05,2.12-1.12,2.1,0.31,4.54,0.4,1.45-1.79,2-1.08,1.73-.57,0.54,2.3,1.49,0.81,2.91,2,1.83-.07,1.12-.41,0.15-2.31,1.33-1.22,0.08-4,0.86-3.44,1.09-.5,1.11,1,0.45,1.42,1.44-.87,0.37-1.22L793.36,540l0.06-1.94,0.63-.9,1.8-2.77,0.88-1.29,1.76,0.41,1.89-1.35,2.57-2.84,2.32-3.41,0.27-4.23,0.41-4.19-0.15-4.44-0.8-2.42,0.29-1,1.51-1.46-1.92-7.57-2.44-16.21h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="indiana">
<path id="indiana_" class="middleWest" d="M705.56,573.67l0.05-2.39,0.41-3.79,1.89-2.44,1.49-3.25,2.16-3.52-0.41-4.87-1.49-2.3-0.27-2.71,0.68-4.6L709.68,538l-1.08-13.4-1.08-12.85-0.81-9.81,2.57,0.74,1.22,0.81,0.95-.27,1.76-1.62,2.37-1.35,4.26-.14,18.4-1.89,4.67-.45,1.26,13.36L747.71,542l0.5,4.83-0.31,1.89,1,1.5,0.08,1.15-2.11,1.34-3,1.3-2.68.46-0.5,4.07-3.83,2.77-2.34,3.36,0.27,2-0.49,1.28h-2.78l-1.33-1.35-2.09,1.06-2.25,1.26,0.14,2.56-1,.22-0.39-.85-1.81-1.26-2.72,1.12-1.3,2.52-1.2-.68-1.22-1.34-3.74.41-4.68.81-2.44,1.3h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="illinois">
<path id="illinois_" class="middleWest" d="M705.54,574l0-2.7,0.47-3.89,2-2.44,1.56-3.41,1.87-3.34-0.31-4.4-1.68-3-0.08-2.8,0.58-4.41-0.69-6-0.89-13.21-1.08-12.57-0.77-9.74-0.23-.77-0.68-2.17L704.51,496l-1.35-1.49-1.22-2.17-0.2-4.59L663.41,490l0.19,2,1.91,0.57,0.77,1,0.38,1.53,3.25,2.87,0.57,1.91-0.57,2.87-1.53,3.06-0.57,2.1-1.91,1.53-1.53.57-4.4,1.15-0.57,1.53-0.57,1.72,0.57,1.15,1.53,1.34-0.19,3.44-1.53,1.34L658.63,523v2.3l-1.53.38-1.34,1-0.19,1.15,0.19,1.72-1.44,1.1-0.86,2.34,0.38,3.06,1.91,6.12,6.12,6.31,4.59,3.06-0.19,3.64,0.77,1.15,5.36,0.38,2.3,1.15-0.57,3.06-1.91,5-0.57,2.68,1.91,3.25,5.36,4.4,3.83,0.57,1.72,4.21,1.72,2.68-0.77,2.49,1.34,3.44,1.53,1.72,1.18-.74,0.76-1.74,1.85-1.46,1.78-.51,2.18,1,3,1.15,1-.25,0.17-1.89-1.08-2,0.25-2,1.54-1.13,2.53-.68,1.06-.38L704,579.46l-0.66-2,1.2-.82,1-2.69h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="wisconsin">
<path id="wisconsin_" class="middleWest" d="M701.79,487.79l-0.06-2.64-1-3.79-0.54-5.14-0.95-2,0.81-2.57,0.68-2.44L702,467l-0.54-2.84-0.54-3,0.41-1.49,1.62-2,0.14-2.3-0.68-1.08,0.54-2.17-0.38-3.49,2.3-4.74,2.44-5.68,0.14-1.89-0.27-.81-0.68.41-3.52,5.28-2.3,3.38L699,446.07,698.34,448l-1.64.68-0.95,1.62-1.22-.27-0.14-1.49,1.08-2,1.76-3.92,1.49-1.35,0.83-2-2.14-1.59L695.77,429l-3-1.12-1.63-1.93L681,423.62l-2.41-.85L671.73,421l-6.63-1L662,415.7l-0.63.46-1-.14-0.54-.95-1.12.25-0.95.14-1.49.81-0.81-.54,0.54-1.62,1.62-2.57,0.95-.95-1.62-1.22-1.76.68-2.44,1.62-6.22,2.71-2.44.54-2.44-.41-0.82-.74L639,416.15l-0.19,2.3v7.08l-1,1.34-4.4,3.25-1.91,5,0.38,0.19L634,437l0.57,2.68-1.53,2.68v3.25l0.38,5.55,2.49,2.49h2.87l1.53,2.68,2.87,0.38,3.25,4.78,5.93,3.44,1.72,2.3,0.77,6.22,0.57,2.77,1.91,1.34,0.19,1.15-1.72,2.87,0.19,2.68,2.1,3.25,2.1,1,2.49,0.38,1.12,1.16,37.92-2.23h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="missouri">
<path id="missouri_" class="middleWest" d="M654.39,530.27l-2.11-2.58-1-1.91-53.87,2-1.91.1,1.05,2.1-0.19,1.91,2.1,3.25,2.58,3.44,2.58,2.3,1.81,0.19,1.25,0.77v2.49l-1.53,1.34-0.38,1.91,1.72,2.87,2.1,2.49,2.1,1.53,1.15,9.76,0.26,30.19,0.19,3.92,0.38,4.51,18.78-.73,19.42-.57,17.41-.67,9.76-.19,1.82,2.87-0.57,2.77-2.58,2-0.48,1.54,4.5,0.38,3.26-.57,1.44-4.6,0.55-4.9L687.8,598,690,596.8l0-2.55,0.85-1.62-1.42-2.13-1.11.82-1.67-1.86-1.08-4,0.67-2.11-1.63-2.87-1.53-3.83-4-.67-5.83-4.69-1.44-3.44,0.67-2.68,1.72-5.07,0.38-2.4-1.63-.86-5.74-.67-0.86-1.43-0.09-3.54-4.59-2.87-5.84-6.5-1.91-6.12-0.19-3.54,0.67-1.92h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="iowa">
<path id="iowa_" class="middleWest" d="M663.39,489.65l0.22,2.33,1.86,0.48,0.8,1,0.42,1.55,3.17,2.81,0.57,2-0.56,2.87-1.32,2.71-0.67,2.29-1.82,1.34-1.44.48L660,511.1l-1.16,3.22,0.61,1.15,1.54,1.41-0.24,3.38-1.48,1.29-0.65,1.38,0.11,2.32-1.58.38-1.36.92-0.23,1.13,0.23,1.77-1.3.93-2.07-2.62-1.06-2.05-55,2.1-0.77.14-1.72-3.78-0.19-5.55-1.34-3.44-0.57-4.4-1.91-3.06-0.77-4-2.3-6.31-1-4.5-1.15-1.82-1.34-2.3,1.64-4.05,1.15-4.78-2.3-1.72-0.38-2.3,0.77-2.1h1.44l69.18-1.06,0.7,3.5,1.89,1.31,0.21,1.19-1.7,2.84,0.16,2.68,2.1,3.18,2.11,1.08,2.58,0.42,0.55,0.7h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="minnesota">
<path id="minnesota_" class="middleWest" d="M584.75,430.42l-0.38-7.08-1.53-6.12-1.53-11.29-0.38-8.23-1.53-2.87-1.34-4.21V382l0.57-3.25-1.52-4.56,25.22,0,0.27-6.9,0.54-.14,1.89,0.41,1.62,0.68,0.68,4.6,1.22,5.14,1.35,1.35H614l0.27,1.22,5.28,0.27v1.76h4.06l0.27-1.08,0.95-.95,1.89-.54,1.08,0.81h2.44l3.25,2.17,4.47,2,2,0.41,0.41-.81,1.22-.41,0.41,2.44,2.16,1.08,0.41-.41,1.08,0.14v1.76l2.16,0.81h2.57l1.35-.68,2.71-2.71,2.16-.41,0.68,1.49,0.41,1.08h0.81l0.81-.68,7.44-.27,1.49,2.57h0.54l0.6-.91,3.72-.31-0.51,1.91-3.3,1.54-7.74,3.4-4,1.68L655,399.93l-2,3L651,406.15l-1.49.68L645.76,411l-1.08.14-3.62,2.31L639,416.15l-0.19,2.67,0.08,6.73L637.73,427l-4.25,3.15-1.87,5L634,437l0.57,2.7L633,442.4l0.14,3.14,0.31,5.63,2.53,2.51h2.79l1.58,2.62,2.83,0.42,3.23,4.75,5.93,3.45,1.79,2.41,0.56,5.39-68,1-0.28-29.86-0.38-2.49-3.44-2.87-1-1.53v-1.34l1.72-1.34,1.15-1.15,0.19-2.68h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="kansas">
<path id="kansas_" class="middleWest" d="M612.08,594.1l-10.56.17-38.58-.38-37.3-1.72L505,591.12,508.28,537l18.48,0.57,33.72,0.7,37.08,0.83h4.27l1.83,1.81,1.69,0,1.37,0.85-0.05,2.52-1.53,1.44-0.28,1.87,1.54,2.85,2.47,2.67,1.95,1.35,1.09,9.41,0.16,30.2h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="nebraska">
<path id="nebraska_" class="middleWest" d="M593.84,524.06l2.7,5.88-0.11,1.93,2.9,4.6,2.28,2.64h-4.23l-36.4-.79-34.14-.75-18.63-.66,0.9-17.85-27.05-2.44,3.64-36.84,13,0.86,16.84,1,14.93,1,19.9,1,9-.38L561.1,485l4,2.49,1,0.77,3.64-1.15,3.25-.38,2.3-.19,1.53,1.15,3.4,1.34,2.49,1.34,0.38,1.34,0.77,1.72h1.53l0.67,0,0.75,3.92,2.44,7.09,0.48,3.14,2.11,3.16,0.48,4.28,1.35,3.55,0.21,5.42h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="southDakota">
<path id="southDakota_" class="middleWest" d="M585.76,493.36l0-.49-2.42-4.06,1.56-3.94,1.25-4.93-2.33-1.74-0.32-2.3,0.66-2.14h2.67l-0.1-4.19-0.28-25.26-0.52-3.15-3.41-2.79-0.82-1.4-0.05-1.35,1.69-1.28,1.28-1.39,0.21-2.22L536,429.41l-45.87-2.89-4.46,53.31,12.21,0.76,16.7,1,14.85,0.78,19.9,1.09,10-.36L561,485l4.35,2.72,0.64,0.6,3.8-1.22,5.47-.51,1.4,1.12,3.52,1.34,2.47,1.37,0.33,1.24,0.87,1.88,1.87-.17h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
<g id="northDakota">
<path id="northDakota_" class="middleWest" d="M584.81,430.5l-0.51-7.06-1.4-5.71-1.58-10.9-0.38-9.2-1.46-2.58L578,390.71l0-8.74,0.52-3.2L577,374.19l-24-.47-15.56-.54-22.19-1.08-19.21-1.79-5.85,56.23,46,2.8,48.6,1.16h0Z"
transform="translate(-73.62 -328.82)"/>
</g>
</g>
Getting all the paths, then reducing into the class attribute, will get you pretty much all of the way there - up to you how you format it in the end.
const dictionary = [...document.getElementsByTagName('path')].reduce((acc, state) => {
acc[state.class] = acc[state.class] ? [...acc[state.class], state.id] : [state.id]
return acc;
}, {})
Hope I understood you correctly!
You could use SimpleXML to parse the SVG source, and loop over the regions. The loop over the states and push into the array. Finally, you could use json_encode() to get your expected output.
$data = [];
$xml = simplexml_load_file('usa.svg');
foreach ($xml->g->g as $region) {
$region_name = (string)$region['id'];
foreach ($region->g as $state) {
$data[$region_name][] = (string)$state['id'];
}
}
$json = json_encode($data);
echo $json ;
Output (something like):
{
"northEast":["newHampshire","vermont","maine","rhodeIsland","newYork","pennsylvania","newJersey","connecticut","massachusetts"],
"middleWest":["ohio","indiana","illinois","wisconsin"]
}
To sort the data, you could use (before json_encode()):
$data = array_map(function($arr) { sort($arr); return $arr; }, $data);
ksort($data);
SVG paths and images
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>
Hover styling and transitions not applying properly to appended elements in Firefox
I have an SVG which I'm using as a sort of interactive floor plan. When you hover over the different areas of the floor plan (<g> elements), they expand and float above the other areas. The scaling of the element is triggered by CSS, however for the hovered area to appear above the other areas I use jQuery to append the element to the bottom of the SVG.
This works fine in Chrome, but not in Firefox. Can you help?
The code actually exceeds the character limit for the question, so I can't add a snippet, but I'm made a pen here for you to look at.
Here are the important bits of the code:
CSS:
g.hoverFX {
transition: transform 0.3s linear;
transform-origin: 50% 50%;
transform: scale(1);
}
g.hoverFX:hover {
filter: url(#shadow);
transform: scale(1.1);
}
JS:
jQuery(function(){
jQuery('g.hoverFX').hover(function(e){
jQuery(this).appendTo('svg#Layer_2');
});
});
HTML:
<g class="hoverFX" id="Conference_1_">
<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>
<path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/>
</g>
<g class="hoverFX" id="Kitchen_1_">
<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>
<path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/>
</g>
<g class="hoverFX" id="Catering_Store_1_">
<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>
<path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/>
</g>
<g class="hoverFX" id="Clearance_Store_1_">
<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>
<path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/>
</g>
<g class="hoverFX" id="Showroom_1_">
<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7
1262.6,783 "/>
<path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6
M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/>
</g>
I've tried to find some answers online, but the most useful thing I found was this previous question, which I think is a step in the right direction, so hopefully it helps.
The cause is just as described in the link you posted. Moving elements around in the DOM will prevent Firefox processing hover events properly.
One solution is to tie your animation to a class instead of a hover event. Then and remove that class on hover.
jQuery(function(){
jQuery('g.hoverFX').hover(function(e){
jQuery(this).addClass("hovering").appendTo('svg#Layer_2');
},function(e){
jQuery(this).removeClass("hovering");
});
});
.st4{fill:#EEEEEE;}
.st19{fill:#1B998B;}
.st20{fill:#87BCDE;}
.st21{fill:#D7263D;}
.st22{fill:#042E6F;}
.st48{fill:#7f3d82;}
g.hoverFX {
transition: transform 0.3s linear;
transform-origin: 50% 50%;
transform: scale(1);
}
g.hoverFX.hovering {
filter: url(#shadow);
transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="interactive-wrapper" style="transform: translate(40%,0%);position:absolute;width: 50vw;">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2061.2 1110.7" style="enable-background:new 0 0 2061.2 1110.7;width: 50vw;" xml:space="preserve">
<defs>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="5"/>
</filter>
</defs>
<g class="hoverFX" id="Conference_1_">
<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>
<path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/>
</g>
<g class="hoverFX" id="Kitchen_1_">
<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>
<path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/>
</g>
<g class="hoverFX" id="Catering_Store_1_">
<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>
<path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/>
</g>
<g class="hoverFX" id="Clearance_Store_1_">
<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>
<path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/>
</g>
<g class="hoverFX" id="Showroom_1_">
<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7
1262.6,783 "/>
<path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6
M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/>
</g>
</svg>
</div>