Related
I'm trying to build an animation for opening a hamburger menu. I am struggling to get the hamburger to the x. In theory I seem to be doing everything right but the result tells me otherwise xD. I've been playing around with the translate values and also the transform-origin but it all behaves in (for me) unexpected ways. Could someone have a look and help me out?
My Example: https://codepen.io/aki-sol/pen/RwMoEJQ
<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect class="top" y="8.5" width="48" height="3.875" fill="blue" />
<rect class="middle" y="22.0625" width="48" height="3.875" fill="blue" />
<rect class="bottom" y="35.625" width="48" height="3.875" fill="blue" />
</svg>
svg:hover .top {
animation-name: top;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
/*transform-origin: 25% 25%;*/
animation-fill-mode: forwards;
}
svg:hover .middle {
animation-name: middle;
animation-duration: 1.5s;
animation-timing-function: linear;
transform-origin: center center;
animation-fill-mode: forwards;
}
svg:hover .bottom {
animation-name: bottom;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
/*transform-origin: 25% 25%;*/
animation-fill-mode: forwards;
}
#keyframes top {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30%);
}
100% {
transform: rotate(45deg) translateY(-25%);
}
}
#keyframes middle {
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes bottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30%);
}
100% {
transform: rotate(-45deg);
}
}
Goal (first example): https://codepen.io/vineethtrv/pen/VYRzaV
Thanks!
I have changed a little bit the dimensions to make the values easier to calculate.
So, svg width is 48, so I set the transform-origin x value at 24, the center.
For top, y is 8 and height is 4, so the center is at 8 + (4 / 2) = 10.
The corrected demo goes like this:
svg:hover .top {
animation-name: top;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
transform-origin: 24px 10px;
animation-fill-mode: forwards;
}
svg:hover .middle {
animation-name: middle;
animation-duration: 1.5s;
animation-timing-function: linear;
transform-origin: center center;
animation-fill-mode: forwards;
}
svg:hover .bottom {
animation-name: bottom;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
transform-origin: 24px 38px;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
transform: translateY(0);
}
50% {
transform: translateY(30%);
}
100% {
transform: translateY(30%) rotate(45deg);
}
}
#keyframes middle {
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes bottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30%);
}
100% {
transform: translateY(-30%) rotate(-45deg);
}
}
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="top" y="8" width="48" height="4" fill="blue" />
<rect class="middle" y="22" width="48" height="4" fill="blue" />
<rect class="bottom" y="36" width="48" height="4" fill="blue" />
</svg>
Perhaps you can play around with the values in the DevTools. Try nudging it with the arrow keys to get it to a position you like. I got the following:
svg:hover .top {
transform-origin: 4% 28%;
}
svg:hover .bottom {
transform-origin: 5% 50%;
}
This question already has answers here:
transform-origin not working in Firefox even properties in percentage value
(3 answers)
Closed 6 years ago.
Here is my character animation I was working on, which is working fine in Chrome but in FireFox it's kind of mess because FireFox has a different method of calculating transform origin related to the SVG canvas itself not to the group object.
.st0 {
fill: #30363f;
}
.st1 {
fill: #dba897;
}
.st2 {
fill: #e2e2e2;
}
.st3 {
fill: #1f2329;
}
.st4 {
fill: #60562b;
}
.st5 {
fill: #bf9286;
}
.st6 {
fill: #251b1b;
}
.st7 {
fill: #2d1c1c;
}
.st8 {
fill: #fff;
}
.st9 {
fill: #46ba7c;
}
.st10 {
fill: #ccc;
}
svg {
display: block;
max-width: 400px;
margin: auto;
}
g {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#head {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: head-rotate 10s infinite;
animation: head-rotate 10s infinite;
}
#arm-l {
-webkit-transform-origin: 80% 2%;
transform-origin: 80% 2%;
-webkit-animation: arm-anger 5s infinite;
animation: arm-anger 5s infinite;
}
#hand-l {
-webkit-transform-origin: 70% 12%;
transform-origin: 70% 12%;
-webkit-animation: hand-anger 5s infinite;
animation: hand-anger 5s infinite;
}
#desk {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: desk-anger 5s infinite;
animation: desk-anger 5s infinite;
}
#eye-r,
#eye-l {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: eye-blinking 10s infinite;
animation: eye-blinking 10s infinite;
}
#arm-r {
-webkit-transform-origin: 30% 2%;
transform-origin: 30% 2%;
}
#hand-r {
-webkit-transform-origin: 30% 12%;
transform-origin: 30% 12%;
}
#-webkit-keyframes head-rotate {
0% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
}
#keyframes head-rotate {
0% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
}
#-webkit-keyframes arm-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
10% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
15% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes arm-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
10% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
15% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes hand-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
10% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
15% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes hand-anger {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
5% {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
10% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
15% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
20% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes desk-anger {
9% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
13% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
15% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes desk-anger {
9% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
13% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
15% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes eye-blinking {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
1% {
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
2% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes eye-blinking {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
1% {
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
2% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
<svg version="1.1" id="character_1" viewBox="0 0 1024 1024" preserveAspectRatio="xMinYMin meet">
<g id="body">
<g id="arm-r">
<path id="upperArm-r" class="st0" d="M582.7,804.3L582.7,804.3c-7.3,2.1-14.8-2-17-9.3l-24.2-82.9l26.3-7.7l24.2,82.9
C594.1,794.5,590,802.1,582.7,804.3z" />
<g id="hand-r">
<path class="st1" d="M604.4,857.2l-1.9-6.6l-11.2,3.3l1.9,6.6c-3.8,3.4-5.6,8.8-4.1,14.1c2.1,7.3,9.7,11.4,17,9.3
s11.4-9.7,9.3-17C613.8,861.7,609.4,858,604.4,857.2z" />
<rect x="584.1" y="847.1" transform="matrix(0.9598 -0.2806 0.2806 0.9598 -214.7713 201.5524)" class="st2" width="24.6" height="7.1" />
<path class="st0" d="M607.8,841l-26.3,7.7l-15.6-53.4c-2.1-7.3,2-14.8,9.3-17v0c7.3-2.1,14.8,2,17,9.3L607.8,841z" />
<rect x="578.9" y="839.8" transform="matrix(0.9598 -0.2806 0.2806 0.9598 -213.2036 200.8397)" class="st3" width="31.5" height="10.1" />
</g>
</g>
<g id="arm-l">
<path id="upperArm-l" class="st0" d="M441,804.3L441,804.3c7.3,2.1,14.8-2,17-9.3l24.2-82.9l-26.3-7.7l-24.2,82.9
C429.6,794.5,433.8,802.1,441,804.3z" />
<g id="hand-l">
<path class="st1" d="M419.4,857.2l1.9-6.6l11.2,3.3l-1.9,6.6c3.8,3.4,5.6,8.8,4.1,14.1c-2.1,7.3-9.7,11.4-17,9.3
c-7.3-2.1-11.4-9.7-9.3-17C409.9,861.7,414.3,858,419.4,857.2z" />
<rect x="415.1" y="847.1" transform="matrix(-0.9598 -0.2806 0.2806 -0.9598 598.7922 1787.1604)" class="st2" width="24.6" height="7.1" />
<path class="st0" d="M415.9,841l26.3,7.7l15.6-53.4c2.1-7.3-2-14.8-9.3-17l0,0c-7.3-2.1-14.8,2-17,9.3L415.9,841z" />
<rect x="413.3" y="839.8" transform="matrix(-0.9598 -0.2806 0.2806 -0.9598 603.7693 1776.2122)" class="st3" width="31.5" height="10.1" />
</g>
</g>
<g id="clothes">
<polygon class="st2" points="520.7,864.7 520.7,683.9 503.3,683.9 503.3,864.7 456.2,864.7 456.2,874.2 567.8,874.2 567.8,864.7
" />
<path class="st3" d="M531.7,681.8c0,3.5-5.7,6.4-13.5,7.4c-1.9,0.3-4,0.4-6.1,0.4c-2.1,0-4.2-0.1-6.1-0.4c-7.9-1-13.5-4-13.5-7.4
c0-4.3,8.8-7.8,19.7-7.8C522.9,674,531.7,677.5,531.7,681.8z" />
<ellipse class="st2" cx="512" cy="685.3" rx="13.4" ry="5.4" />
<path class="st0" d="M505.9,689.3c-7.9-1-13.5-4-13.5-7.4V693l-36.1,11.3v160.4h47V704.2h2.6V689.3z" />
<path class="st0" d="M531.7,693v-11.2c0,3.5-5.7,6.4-13.5,7.4v14.9h2.6v160.5h47V704.3L531.7,693z" />
<circle class="st4" cx="512" cy="751.9" r="1.8" />
<circle class="st4" cx="512.1" cy="722.5" r="1.8" />
<circle class="st4" cx="512" cy="781.3" r="1.8" />
<circle class="st4" cx="512" cy="810.7" r="1.8" />
<circle class="st4" cx="512" cy="840.1" r="1.8" />
<path class="st5" d="M500.2,664.4v18.8c0,2.6,5.3,4.7,11.8,4.7c6.5,0,11.8-2.1,11.8-4.7v-18.8H500.2z" />
</g>
</g>
<g id="head">
<path id="ear-r" class="st1" d="M638.2,511.8h-8.7v-76.4h8.7c9.8,0,17.7,7.9,17.7,17.7v41.1C655.8,503.9,647.9,511.8,638.2,511.8z" />
<path id="ear-l" class="st1" d="M385.8,511.8h8.7v-76.4h-8.7c-9.8,0-17.7,7.9-17.7,17.7v41.1C368.2,503.9,376.1,511.8,385.8,511.8z
" />
<path id="face" class="st1" d="M386.5,316.8v255.9c0,5,1.5,9.9,4.3,14.1l58.7,72.5c7.8,9.6,19.5,15.2,31.9,15.2h61.3
c12.4,0,24.1-5.6,31.9-15.2l58.7-72.5c2.8-4.2,4.3-9.1,4.3-14.1V316.8H386.5z" />
<polygon id="eyebrow-r" class="st6" points="595.2,463.9 521.3,480.2 591.1,451.2 " />
<g id="eye-r">
<circle class="st7" cx="558.3" cy="505.3" r="15.7" />
<circle class="st8" cx="551.1" cy="498.1" r="4.4" />
</g>
<polygon id="eyebrow-l" class="st6" points="437.8,441.2 502.5,480.2 431.9,453.2 " />
<g id="eye-l">
<circle class="st7" cx="465.7" cy="505.3" r="15.7" />
<circle class="st8" cx="457.9" cy="497.4" r="3.8" />
</g>
<path id="hair" class="st6" d="M625.8,293.2c-4.1-0.3-7.9,1.5-10.3,4.3c-1.6,1.8-4.5,1.9-6.1,0c-2.3-2.7-5.7-4.4-9.5-4.4
s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0
c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0
c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4c-3.8,0-7.2,1.7-9.5,4.4
c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4c-1.6,1.8-4.5,1.8-6,0c-2.3-2.7-5.7-4.4-9.5-4.4s-7.2,1.7-9.5,4.4
c-1.6,1.8-4.5,1.8-6.1,0c-2.5-2.9-6.2-4.6-10.3-4.3c-6.7,0.4-11.7,6.3-11.7,13v1.5v7.6v35.3v83.7V476H399v-41.8l12.6-12.6v-67.3
c0-2.1,1.7-3.8,3.8-3.8h193.2c2.1,0,3.8,1.7,3.8,3.8v67.3l12.6,12.6V476h12.6v-41.8v-83.7v-35.3v-7.6v-1.5
C637.5,299.5,632.5,293.6,625.8,293.2z" />
<polygon id="mouth" class="st8" points="460.1,600.5 562.6,601 563.9,578 461.7,592.5 " />
</g>
<rect id="desk" x="166" y="867.8" class="st9" width="692" height="25.8" />
<g id="laptop">
<polygon class="st10" points="627.6,738.7 396.4,738.7 402.4,873.3 621.6,873.3 " />
<circle class="st8" cx="510.4" cy="811.4" r="22.2" />
</g>
</svg>
Here is the question is there is a way that i can make FireFox behave like Chrome or reverse Chrome act like FireFox so my animation can run on cross browsers.
When i used absolute values instead of percentage it worked fine
for instance change transform-origin: 50% 50% to transform-origin: 512px 660px
The working code
See the Pen Just developing by Abdelrahman Ismail (#ismail9k) on CodePen.
I have svg file, which i need to animate, i didn know how to animate polygon inside this file so i decide to use CSS3 animation intead, but not all browser display it right, i mean for firefox and safari there is no animation, why?
This is svg file code: (plus_animation.svg)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, 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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="104.5px"
height="104px" viewBox="0 0 104.5 104" enable-background="new 0 0 104.5 104" xml:space="preserve">
<style type="text/css" >
<![CDATA[
#-webkit-keyframes pulse_animationW {
0% { -webkit-transform: scale(1); }
20% { -webkit-transform: scale(0.9); }
40% { -webkit-transform: scale(0.7); }
50% { -webkit-transform: scale(0.5); }
60% { -webkit-transform: scale(0.7); }
80% { -webkit-transform: scale(0.9); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes pulse_animationM {
0% { -moz-transform: scale(1); }
20% { -moz-transform: scale(0.9); }
40% { -moz-transform: scale(0.7); }
50% { -moz-transform: scale(0.5); }
60% { -moz-transform: scale(0.7); }
80% { -moz-transform: scale(0.9); }
100% { -moz-transform: scale(1); }
}
#-moz-keyframes pulse_animationMS {
0% { -ms-transform: scale(1); }
20% { -ms-transform: scale(0.9); }
40% { -ms-transform: scale(0.7); }
50% { -ms-transform: scale(0.5); }
60% { -ms-transform: scale(0.7); }
80% { -ms-transform: scale(0.9); }
100% { -ms-transform: scale(1); }
}
#keyframes pulse_animation {
0% { transform: scale(1); }
20% { transform: scale(0.9); }
40% { transform: scale(0.7); }
50% { transform: scale(0.5); }
60% { transform: scale(0.7); }
80% { transform: scale(0.9); }
100% { transform: scale(1); }
}
#topPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 1000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration: 1000ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 1000ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 1000ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.botPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 500ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration: 500ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 500ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 500ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#midPlus{
-webkit-animation-name: 'pulse_animationW';
-webkit-animation-duration: 2000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: 'pulse_animationM';
-moz-animation-duration:2000ms;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: 'pulse_animationMS';
-ms-animation-duration: 2000ms;
-ms-transform-origin:50% 50%;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: 'pulse_animation';
animation-duration: 2000ms;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
]]>
</style>
<g id="Warstwa_2" display="none">
<rect x="-2637.5" y="-1982" display="inline" fill="#1D1D1B" stroke="#1D1D1B" stroke-miterlimit="10" width="6919" height="3576"/>
</g>
<g id="Warstwa_1">
<g>
<polygon id="midPlus" fill="#FFFFFF" points="56,48.5 56,2.5 49,2.5 49,48.5 3,48.5 3,55.5 49,55.5 49,101.5 56,101.5 56,55.5 102,55.5
102,48.5 "/>
<rect class="botPlus" x="3.086" y="82.952" fill="#FFFFFF" width="32.817" height="3.834"/>
<rect class="botPlus" x="17.578" y="68.462" fill="#FFFFFF" width="3.834" height="32.815"/>
<polygon id="topPlus" fill="#FFFFFF" points="102,17.5 87,17.5 87,2.5 83,2.5 83,17.5 69,17.5 69,21.5 83,21.5 83,35.5 87,35.5 87,21.5
102,21.5"/>
<rect x="3.332" y="3.06" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="97.971" height="97.973"/>
<rect x="3.332" y="3.06" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="97.971" height="97.973"/>
<rect x="19.495" y="19.223" fill="none" stroke="#FFFFFF" stroke-width="0.996" stroke-miterlimit="10" width="65.646" height="65.646"/>
<rect x="2.833" y="2.561" fill="none" width="98.968" height="98.97"/>
</g>
</g>
</svg>
This is code in html page:
<div class="col-sm-offset-1 col-sm-2 text-center logoSVG">
<img src="~/Content/img/technology_partners/benefits/plus.svg" alt="SVG">
<p class="benefit-description">#Model.Benefit_1Text</p>
</div>
this is jQuery code:
$(document).ready(function () {
$('#benefits-div .logoSVG img').hover(function () {
var split = $(this).attr("src").split(".svg");
$(this).attr("src", split[0] + "_animation.svg");
}, function () {
var split = $(this).attr("src").split("_animation.svg");
$(this).attr("src", split[0] + ".svg");
});
});
Is it possible to animate a path in the symbol tag with css3 keyframe animation? It doesn't work in my case.
Example:
http://codepen.io/anon/pen/Hfbmr
HTML:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-love" viewBox="0 0 54 54">
<title>Love</title>
<path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
<path id="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
/>
</symbol>
CSS:
.icon-love {
height: 54px;
width: 54px;
}
#icon-love-heart {
animation-name: 'heartbeat';
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
Cheers Philip
It is perfectly possible. It works if you drop <use xlink:href="#icon-love"/> part and just use normal svg. If you are concenrned about maintaining your code clean I suggest you store your svg in a variable and output it dynamically instead of using the <use> tag, which breaks the animation.
http://codepen.io/easwee/pen/xFDbu
<svg class="icon-love" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
<path class="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
/>
</svg>
Also added prefixes for crossbrowser css (webkit, firefox and standard):
.icon-love {width:54px;height:54px;}
.icon-love-heart {
-moz-animation: heartbeat 5s linear infinite;
-webkit-animation: heartbeat 5s linear infinite;
animation: heartbeat 5s linear infinite;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
}
#-moz-keyframes heartbeat {
0% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1.08); }
50% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1.05); }
80% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
SVG animation - http://shrineweb.in/other-files/clients/proxymis/cloudDrizzleSun.svg
I want to change color of water drops which is currently black.
How do I do it?
Here is the code of the SVG:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="cloudDrizzleSun"
class="climacon climacon_cloudDrizzleSun"
x="0px"
y="0px"
viewBox="15 15 70 70"
enable-background="new 15 15 70 70"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="cloudDrizzleSun.svg"><metadata
id="metadata7959"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs7957" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1138"
id="namedview7955"
showgrid="false"
inkscape:zoom="19.189899"
inkscape:cx="31.052451"
inkscape:cy="43.388"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g7939" />
<style
type="text/css"
id="style7904">
svg{
shape-rendering: geometricPrecision
}
g, path, circle, rect{
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
}
.climacon_component-stroke_drizzle {
fill-opacity: 0;
-webkit-animation-name: drizzleFall, fillOpacity2;
-moz-animation-name: drizzleFall, fillOpacity2;
-o-animation-name: drizzleFall, fillOpacity2;
animation-name: drizzleFall, fillOpacity2;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.climacon_component-stroke_drizzle:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.climacon_component-stroke_drizzle:nth-child(2) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.climacon_component-stroke_drizzle:nth-child(3) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.climacon_componentWrap-sun_cloud {
-webkit-animation-name: behindCloudMove, rotate;
-moz-animation-name: behindCloudMove, rotate;
-o-animation-name: behindCloudMove, rotate;
animation-name: behindCloudMove, rotate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-timing-function: ease-out, linear;
-moz-animation-timing-function: ease-out, linear;
-o-animation-timing-function: ease-out, linear;
animation-timing-function: ease-out, linear;
-webkit-animation-delay: 0, 3s;
-moz-animation-delay: 0, 3s;
-o-animation-delay: 0, 3s;
animation-delay: 0, 3s;
-webkit-animation-duration: 3s, 12s;
-moz-animation-duration: 3s, 12s;
-o-animation-duration: 3s, 12s;
animation-duration: 3s, 12s;
}
.climacon_component-stroke_sunSpoke {
fill-opacity: 0;
-webkit-animation-name: fillOpacity, scale;
-moz-animation-name: fillOpacity, scale;
-o-animation-name: fillOpacity, scale;
animation-name: fillOpacity, scale;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
-o-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-delay: 3s, 0;
-moz-animation-delay: 3s, 0;
-o-animation-delay: 3s, 0;
animation-delay: 3s, 0;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.climacon_component-stroke_sunSpoke:nth-child(even) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes drizzleFall {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(21px);
}
}
#-moz-keyframes drizzleFall {
0% {
-moz-transform: translateY(0);
}
100% {
-moz-transform: translateY(21px);
}
}
#-o-keyframes drizzleFall {
0% {
-o-transform: translateY(0);
}
100% {
-o-transform: translateY(21px);
}
}
#keyframes drizzleFall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(21px);
}
}
#-webkit-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-moz-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-o-keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#keyframes fillOpacity2 {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
50% {
fill-opacity: 1;
stroke-opacity: 1;
}
100% {
fill-opacity: 0;
stroke-opacity: 0;
}
}
#-webkit-keyframes rotate{
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate{
0%{
-moz-transform: rotate(0);
}
100%{
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate{
0%{
-o-transform: rotate(0);
}
100%{
-o-transform: rotate(360deg);
}
}
#keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
#-webkit-keyframes scale{
0%{
-webkit-transform: scale(1,1)
}
100%{
-webkit-transform: scale(.5,.5)
}
}
#-moz-keyframes scale{
0%{
-moz-transform: scale(1,1)
}
100%{
-moz-transform: scale(.5,.5)
}
}
#-o-keyframes scale{
0%{
-o-transform: scale(1,1)
}
100%{
-o-transform: scale(.5,.5)
}
}
#keyframes scale{
0%{
transform: scale(1,1)
}
100%{
transform: scale(.5,.5)
}
}
#-webkit-keyframes behindCloudMove {
0% {
-webkit-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-webkit-transform: translateX(0) translateY(0);
}
}
#-moz-keyframes behindCloudMove {
0% {
-moz-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-moz-transform: translateX(0) translateY(0);
}
}
#-o-keyframes behindCloudMove {
0% {
-o-transform: translateX(-1.75px) translateY(1.75px);
}
100% {
-o-transform: translateX(0) translateY(0);
}
}
#keyframes behindCloudMove {
0% {
transform: translateX(-1.75px) translateY(1.75px);
}
100% {
transform: translateX(0) translateY(0);
}
}
#-webkit-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-moz-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#-o-keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
#keyframes fillOpacity {
0% {
fill-opacity: 0;
stroke-opacity: 0;
}
100% {
fill-opacity: 1;
stroke-opacity: 1;
}
}
</style>
<clipPath
id="cloudFillClip">
<path
d="M15,15v70h70V15H15z M59.943,61.639c-3.02,0-12.381,0-15.999,0c-6.626,0-11.998-5.371-11.998-11.998c0-6.627,5.372-11.999,11.998-11.999c5.691,0,10.434,3.974,11.665,9.29c1.252-0.81,2.733-1.291,4.334-1.291c4.418,0,8,3.582,8,8C67.943,58.057,64.361,61.639,59.943,61.639z"
id="path7907" />
</clipPath>
<clipPath
id="sunCloudFillClip">
<path
d="M15,15v70h70V15H15z M57.945,49.641c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C65.943,46.059,62.362,49.641,57.945,49.641z"
id="path7910" />
</clipPath>
<clipPath
id="cloudSunFillClip">
<path
d="M15,15v70h20.947V63.481c-4.778-2.767-8-7.922-8-13.84c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12c0,5.262-3.394,9.723-8.107,11.341V85H85V15H15z"
id="path7913" />
</clipPath>
<g
class="climacon_iconWrap climacon_iconWrap-cloudDrizzleSun"
id="g7915">
<g
clip-path="url(#cloudSunFillClip)"
id="g7917">
<g
class="climacon_componentWrap climacon_componentWrap-sun climacon_componentWrap-sun_cloud"
id="g7919">
<g
class="climacon_componentWrap climacon_componentWrap_sunSpoke"
id="g7921">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"
id="path7923" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M72.174,30.3c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L72.174,30.3z"
id="path7925" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"
id="path7927" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M43.892,30.3l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C45.939,31.081,44.673,31.081,43.892,30.3z"
id="path7929" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"
id="path7931" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M43.892,52.925c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L43.892,52.925z"
id="path7933" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"
id="path7935" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M72.174,52.925l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C70.125,52.144,71.391,52.144,72.174,52.925z"
id="path7937" />
</g>
<g
class="climacon_componentWrap climacon_componentWrap-sunBody"
clip-path="url(#sunCloudFillClip)"
id="g7939">
<circle
class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody"
cx="58.033"
cy="41.612"
r="11.999"
id="circle7941"
style="fill:#ffe680;fill-opacity:1" />
</g>
</g>
</g>
<g
class="climacon_componentWrap climacon_componentWrap-drizzle"
id="g7943">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left"
d="M42.001,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2.001-0.895-2.001-2v-3.998C40,54.538,40.896,53.644,42.001,53.644z"
id="path7945" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle"
d="M49.999,53.644c1.104,0,2,0.896,2,2v4c0,1.104-0.896,2-2,2s-1.998-0.896-1.998-2v-4C48.001,54.54,48.896,53.644,49.999,53.644z"
id="path7947" />
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right"
d="M57.999,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2-0.895-2-2v-3.998C55.999,54.538,56.894,53.644,57.999,53.644z"
id="path7949" />
</g>
<g
class="climacon_componentWrap climacon_componentWrap-cloud"
clip-path="url(#cloudFillClip)"
id="g7951"
style="fill:#3abbd6;fill-opacity:1">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_cloud"
d="M63.999,64.944v-4.381c2.387-1.386,3.998-3.961,3.998-6.92c0-4.418-3.58-8-7.998-8c-1.603,0-3.084,0.481-4.334,1.291c-1.232-5.316-5.973-9.29-11.664-9.29c-6.628,0-11.999,5.372-11.999,12c0,3.549,1.55,6.729,3.998,8.926v4.914c-4.776-2.769-7.998-7.922-7.998-13.84c0-8.836,7.162-15.999,15.999-15.999c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.336-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12C71.997,58.864,68.655,63.296,63.999,64.944z"
id="path7953"
style="fill:#3abbd6;fill-opacity:1" />
</g>
</g>
</svg>
Answer
Look at the 3 path tags with classes
climacon_component climacon_component-stroke climacon_component-stroke_drizzle
at the very bottom.
Add
style="fill:red;"
or style="fill:#3643D1;" (or any other).
How I found it
I've tried every path element.