SVG image CSS3 animation - css

I need to make the first dot of my bubble chat visible and invisible in an infinit CSS3 animation.
Why doesn't my code work ?
#keyframes onoff {
0% { display: none; }
25% { display: block; }
50% { display: none; }
100% { display: block; }
}
#circle1 {
animation: onoff 5s infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
<g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
<path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />
<!--Annimation on this cicle-->
<circle id="circle1" cx="8.5" cy="10" r=".5" />
<!-- -->
<circle id="circle2" cx="16.5" cy="10" r=".5" />
<circle id="circle3 " cx="12.5" cy="10" r=".5" />
</g>
</svg>


The display property isn't animatable (see MDN). You can animate the opacity though.
Example :
#keyframes onoff {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
#circle1 {
animation: onoff 2s infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
<g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
<path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />
<circle id="circle1" cx="8.5" cy="10" r=".5" />
<circle id="circle2" cx="16.5" cy="10" r=".5" />
<circle id="circle3 " cx="12.5" cy="10" r=".5" />
</g>
</svg>

Related

moving svg circle using css animation

i'm trying to move svg circle using css animation on the whole dotted line cirlce, but the problem is when i use this code it start to move but not on all dotted circle line , any help?
#c1{
animation: moving 1s infinite linear;
/* motion-rotation: reverse; */
}
#-webkit-keyframes moving{
50% {transform: rotate(0.5deg)}
100% {transform: rotate(0.5deg)}
}
<svg id="eedf7e36-f7ba-41f3-811a-5462d78ed19b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 910.88794 653.61419">
<rect y="646.47623" width="431.1819" height="1.87469" fill="#3f3d56"/>
<polygon points="109.607 639.942 121.866 639.942 127.699 592.654 109.605 592.654 109.607 639.942" fill="#ffb8b8"/>
<path d="M251.53582,759.63143h38.53073a0,0,0,0,1,0,0V774.5183a0,0,0,0,1,0,0H266.42267a14.88685,14.88685,0,0,1-14.88685-14.88685v0A0,0,0,0,1,251.53582,759.63143Z" transform="translate(397.08134 1410.94447) rotate(179.99738)" fill="#2f2e41"/><polygon points="44.379 637.585 56.532 639.205 68.564 593.103 50.629 590.712 44.379 637.585" fill="#ffb8b8"/><path d="M185.6415,759.43939h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H200.52836a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(162.1087 1430.92651) rotate(-172.40554)" fill="#2f2e41"/><polygon points="61.796 444.64 130.796 447.64 127.796 622.64 109.796 620.64 95.796 501.64 62.796 628.64 44.796 625.64 61.796 444.64" fill="#2f2e41"/><path d="M252.35236,463.83242l-24-4.90286-15,109.90286s44,29,58-1Z" transform="translate(-144.55603 -123.1929)" fill="#11067d"/><circle cx="97.32782" cy="303.17101" r="24.56103" fill="#ffb8b8"/><path d="M228.35236,457.83242l-35,11s17,85-11,129c0,0,35,37,50-46C232.35236,551.83242,244.35236,484.83242,228.35236,457.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M252.35236,463.83242l26,16s14,117,0,128S252.35236,463.83242,252.35236,463.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M289.1621,624.79959a10.0558,10.0558,0,0,1,.96818-15.3889l-10.57065-34.13562,17.83265,5.17981,7.30413,31.62164a10.11027,10.11027,0,0,1-15.53431,12.72307Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><path d="M199.338,614.92719a10.05577,10.05577,0,0,1-1.00976-15.38624l-14.85349-32.50158,18.349,2.85437,11.292,30.42646a10.11027,10.11027,0,0,1-13.77778,14.607Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><polygon points="57.796 346.64 48.796 345.64 25.796 420.64 48.796 472.64 66.796 461.64 46.796 418.64 62.796 372.64 57.796 346.64" fill="#2f2e41"/>
<polygon points="128.796 355.64 133.796 356.64 157.796 473.64 141.796 478.64 122.796 409.64 128.796 355.64" fill="#2f2e41"/><path d="M225.00655,436.44921a14.06316,14.06316,0,0,1,8.44415-11.03667c4.7277-1.93846,10.06074-1.11966,15.15695-.7489s10.76991.04877,14.44758-3.49856c3.3597-3.24064,4.11524-8.61848,2.49281-12.99537s-5.29609-7.775-9.46944-9.866a40.79142,40.79142,0,0,0-13.47062-3.56c-6.811-.82288-13.80511-.92776-20.44341.80412s-4.9267,5.44408-8.81681,11.095-5.05548,13.34984-2.08959,19.53611c1.98454,4.13936,5.54088,7.27259,9.004,10.28584" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
<path d="M774.394,707.49843l-.00049-1.87469c3.72742-.00092,7.51117-.07782,11.24732-.227l.07507,1.87286C781.95514,707.42061,778.14618,707.49752,774.394,707.49843Zm-11.31872-.21692c-3.74756-.14648-7.55005-.37072-11.30134-.66638l.1474-1.8692c3.727.29474,7.50434.51721,11.22718.66272Zm33.942-.6911-.14923-1.8692c3.72009-.29748,7.48511-.67553,11.18964-1.12317l.22522,1.86188c-3.72968.45032-7.51984.8302-11.26563,1.13043Zm-56.51025-1.093c-3.738-.44764-7.51026-.97583-11.213-1.56989l.29749-1.85089c3.67755.59039,7.42511,1.11493,11.13794,1.5589Zm78.98608-1.62024-.29932-1.85089c3.67664-.59412,7.399-1.27424,11.06379-2.01935l.37347,1.83624c-3.689.75153-7.43652,1.43536-11.13788,2.034Zm-101.33929-1.97083c-3.68946-.74695-7.4068-1.579-11.05005-2.47064l.4458-1.82159c3.619.887,7.31164,1.7127,10.97589,2.45416Zm123.525-2.54657-.44855-1.81976c3.63-.89343,7.2851-1.87195,10.8642-2.90906l.52179,1.80145C849.01239,697.47591,845.33258,698.46084,841.67883,699.35976Zm-145.51611-2.84045c-3.61487-1.04352-7.253-2.1731-10.81342-3.35761l.59223-1.77948c3.53656,1.17719,7.15051,2.29944,10.74109,3.33564ZM863.42511,693.061l-.59406-1.77771c3.53888-1.18267,7.10248-2.45416,10.59284-3.78051l.66638,1.752C870.57605,690.59035,866.98779,691.871,863.42511,693.061Zm-188.77344-3.70458c-3.51691-1.33283-7.05945-2.75715-10.52966-4.23548l.73462-1.72461c3.4469,1.46826,6.96606,2.88349,10.45965,4.20618Zm209.91052-4.32331-.736-1.72461c3.42718-1.46368,6.8681-3.01526,10.22668-4.61261l.80555,1.69348C891.477,681.99679,888.01227,683.55929,884.56219,685.0331ZM653.775,680.46352c-3.40521-1.61658-6.81915-3.32281-10.14654-5.07214l.87237-1.65869c3.305,1.73645,6.69556,3.43176,10.07788,5.03735Zm251.18836-5.13165-.8733-1.65869c3.30182-1.73743,6.60907-3.5636,9.82941-5.42639l.93921,1.62207c-3.24231,1.87561-6.57153,3.71368-9.89526,5.463Zm-271.265-5.41724c-3.267-1.88843-6.52991-3.86383-9.69849-5.87127l1.00324-1.58362c3.14709,1.99371,6.38849,3.9563,9.63348,5.83282Zm290.8313-5.90423-1.00323-1.58362c3.14251-1.991,6.29418-4.07709,9.36712-6.20172l1.06549,1.5415c-3.093,2.13928-6.26581,4.24-9.42932,6.24384ZM614.548,657.78853c-3.09991-2.142-6.19214-4.37188-9.19092-6.62829l1.12684-1.49756c2.97912,2.24084,6.05065,
4.45605,9.12957,6.58435Zm328.58582-6.64019-1.12763-1.49756c2.97223-2.23535,5.94818-4.56867,8.84534-6.93585l1.18634,1.45178c-2.9165,2.38275-5.91254,4.73163-8.904,6.98163Zm-346.69251-6.9798c-2.91046-2.37817-5.81268-4.84784-8.6261-7.34137l1.24311-1.40234c2.7951,2.47613,5.6781,4.93023,8.56933,7.29193Zm364.2157-7.33679-1.2431-1.40235c2.79285-2.47522,5.57373-5.041,8.265-7.62512l1.298,1.35291c-2.70856,2.60064-5.50782,5.18292-8.31983,7.67456ZM579.49121,629.149c-2.704-2.59784-5.3985-5.2909-8.00775-8.00409l1.35107-1.29987c2.59235,2.6958,5.26892,5.37146,7.95557,7.951Zm397.49444-7.99677-1.35113-1.29986c2.58411-2.68757,5.15179-5.46759,7.63245-8.2641l1.40234,1.24493C982.17218,615.64712,979.58722,618.44631,976.98565,621.15218Zm-413.18231-8.32263c-2.49945-2.81757-4.96869-5.71655-7.34-8.61652l1.45178-1.18634c2.35483,2.88074,4.808,5.7605,7.29056,8.55793Zm428.212-8.61835-1.45178-1.18634c2.369-2.8963,4.7069-5.87494,6.94958-8.85266L999.01068,595.3C996.75335,598.29781,994.399,601.29568,992.01532,604.2112Zm-442.5391-8.89752c-2.25915-2.99969-4.48767-6.08453-6.62326-9.17029l1.54151-1.06732c2.1214,3.06561,4.33481,6.13031,6.57931,9.10986Zm456.16825-9.20142-1.54151-1.06549c2.12915-3.07934,4.22174-6.23742,6.2182-9.38635l1.58362,1.00324C1009.89459,579.83364,1007.78833,583.01278,1005.64447,586.11226Zm-469.04029-9.3955c-2.00881-3.16724-3.98144-6.41956-5.86349-9.66736l1.62207-.93921c1.8692,3.22583,3.829,6.45618,5.82413,9.60236Zm481.17835-9.74793-1.62207-.93921c1.87653-3.24322,3.70819-6.56146,5.4447-9.86139l1.65869.87329c-1.74756,3.3219-3.592,6.66218-5.48138,9.92731ZM525.27316,557.155c-1.74655-3.31641-3.45007-6.71527-5.063-10.10217l1.69254-.80555c1.60238,3.364,3.29446,6.74,5.02911,10.03443Zm503.06821-10.25684-1.69348-.80554c1.60467-3.37591,3.16357-6.8324,4.63183-10.27423l1.72461.736C1031.526,540.01906,1029.957,543.49935,1028.34137,546.89815Zm-512.781-10.13788c-1.4765-3.45282-2.899-6.97522-4.22861-10.47015l1.752-.66638c1.32089,3.47021,2.73379,6.96973,4.20022,10.39874Zm521.68585-10.73468-1.753-.66455c1.3291-3.50683,2.60334-7.08142,3.7851-10.623l1.77771.59314C1039.867,518.89748,1038.58453,522.495,1037.24621,526.02559ZM507.52014,515.62777c-1.19366-3.5636-2.32965-7.20038-3.37637-10.80792l1.80053-.52179c1.03989,3.58282,2.16809,7.19488,3.35352,10.73468Zm536.90088-11.11-1.80145-.52c1.03436-3.57733,2.0111-7.23242,2.90362-10.8656l1.81976.44672C1046.44494,497.23678,1045.46179,500.91756,1044.421,504.51778Zm-543.212-10.634c-.90072-3.65057-1.73785-7.36609-2.48938-11.045l1.83719-.37531c.746,3.65424,1.57767,7.346,2.472,10.9718Zm548.6109-11.35168-1.83807-.37348c.74146-3.65149,1.41882-7.37433,2.01386-11.06421l1.85089.2984C1051.24792,475.10744,1050.566,478.855,1049.81994,482.53213ZM496.67972,471.70131c-.601-3.70092-1.13553-7.47229-1.58866-11.20977l1.861-.22522c.45038,3.71283.9813,7.45855,1.57859,11.1347Zm556.74319-11.52282-1.86188-.22339c.4458-3.711.822-7.47592,1.11676-11.1901l1.86921.14829c-.29755,3.73935-.6756,7.52948-1.12409,11.26514ZM493.95462,449.22771c-.30255-3.74438-.5332-7.54687-.68561-11.30221l1.87286-.076c.15149,3.73019.3808,7.50751.681,11.22717Zm561.266-11.61484-1.87286-.07415c.14648-3.73569.22149-7.519.22149-11.245l-.00091-.62109h1.87469l.00092.617c.00006,3.7544-.07495,7.56241-.22327,11.32324ZM494.907,426.60448h-1.87469l.00045-.31488c0-3.65695.071-7.36059.21146-11.00335l1.87286.07232c-.13913,3.619-.20962,7.29788-.20962,10.93515Zm558.41419-12.17413c-.15473-3.72241-.38721-7.49973-.69294-11.22626l1.86921-.15286c.30664,3.75168.541,7.55374.69659,11.3013ZM495.774,404.13094l-1.8692-.14645c.29474-3.754.66916-7.54459,1.11219-11.26746l1.86187.22153C496.43851,396.63668,496.06686,400.40258,495.774,404.13094Zm555.71378-12.11554c-.45221-3.69723-.98676-7.443-1.59094-11.1329l1.85089-.30252c.60687,3.71463,1.14606,7.48553,1.6001,11.2084ZM498.4313,381.80016l-1.85092-.2966c.59409-3.71188,1.27194-7.46081,2.01569-11.14157l1.83716.37073C499.695,374.38921,499.02173,378.11254,498.4313,381.80016Zm549.42606-11.97824c-.75244-3.66336-1.5882-7.35327-2.48438-10.96857l1.81977-.45129c.90258,3.63956,1.74383,7.3551,2.50085,11.04272Zm-544.97681-10.066-1.82116-.44488c.8916-3.64872,1.87106-7.33039,2.91091-10.94339l1.80149.51855c-1.03305,3.58878-2.00559,7.24573-2.89127,10.86972Zm539.566-11.76175c-1.04352-3.5805-2.175-7.19125-3.36493-10.73147l1.77765-.59684c1.19733,3.564,2.337,7.199,3.3869,10.80381ZM509.101,338.14373l-1.779-.59134c1.18634-3.56955,2.4642-7.16928,3.7984-10.699l1.75388.66275C511.54873,331.02251,510.27911,334.598,509.101,338.14373Zm526.18176-11.46747c-1.33191-3.48715-2.7489-6.98438-4.21167-10.39508l1.72278-.73871c1.47284,3.43359,2.8999,6.95416,4.241,10.46466Zm-518.20739-9.6225-1.7255-.73413c1.4733-3.46335,3.03861-6.94546,4.652-10.34842l1.69391.8028C520.09292,310.1545,518.5386,313.6133,517.07538,317.05376Zm509.36572-10.99283c-1.60468-3.36038-3.29993-6.73446-5.03919-10.02847l1.65686-.87555c1.752,3.31644,3.45923,6.713,5.074,10.09668Zm-499.71253-9.36847-1.66052-.87054c1.74747-3.33063,3.58829-6.6727,5.4708-9.93375l1.6239.93735c-1.87018,3.23911-3.69864,6.55917-5.43421,9.86691ZM1015.959,286.21224c-1.87469-3.22717-3.83728-6.45575-5.83465-9.59689l1.58178-1.006c2.01111,3.16221,3.98652,6.41272,5.874,9.661Zm-477.96945-9.02338-1.58453-1.00235c2.01111-3.17959,4.11419-6.361,6.25024-9.45544l1.54242,1.065c-2.12189,3.07388-4.21033,6.23377-6.20813,9.39276Zm465.9166-9.931c-2.12641-3.06424-4.34351-6.1271-6.58893-9.10211l1.49573-1.12958c2.261,2.99512,4.49267,6.07813,6.63287,9.16346Zm-453.1287-8.59542-1.4985-1.12592c2.25915-3.007,4.60941-6.00766,6.98529-8.91949l1.4527,1.18542c-2.36029,2.89212-4.695,5.87305-6.93952,8.85995Zm439.58927-9.34012c-2.36444-2.88483-4.82135-5.76142-7.30017-8.54969l1.40051-1.24581c2.49628,2.807,4.96869,5.70282,7.34961,8.60733ZM565.00482,241.229l-1.40329-1.24215c2.48892-2.81208,5.07077-5.614,7.6741-8.32816l1.353,1.298c-2.586,2.69577-5.15088,5.47943-7.62378,8.27227Zm410.42383-8.70987c-2.59418-2.69168-5.2735-5.36367-7.96472-7.94232l1.29712-1.35385c2.70861,2.596,5.40625,5.28589,8.0169,7.99542Zm-394.85358-7.52215-1.29986-1.35111c2.705-2.6029,5.50189-5.18792,8.31213-7.68417l1.24487,1.40143c-2.79193,2.47977-5.57007,5.04834-8.2572,7.63382Zm378.61286-8.03934c-2.80109-2.47656-5.68726-4.92706-8.57715-7.28277l1.18451-1.45316c2.909,2.37177,5.81451,4.83826,8.63391,7.33176Zm-361.8014-6.89007-1.18817-1.45c2.90863-2.38229,5.90192-4.73437,8.89618-6.99168l1.12866,1.49666c-2.97461,2.24222-5.94775,4.57919-8.83673,6.945Zm344.35877-7.32718c-2.99054-2.24453-6.06531-4.45655-9.13642-6.57474l1.06366-1.54334c3.09217,2.13239,6.18708,4.35906,9.19867,6.61869Zm-326.415-6.20356-1.06824-1.54058c3.09033-2.14154,6.26074-4.24555,9.4234-6.25391l1.00507,1.5827c-3.14154,1.99457-6.291,4.0844-9.36023,6.21175Zm307.8822-6.57519c-3.16083-1.99645-6.404-3.95491-9.64081-5.82092l.93738-1.62389c3.257,1.87837,6.5221,3.8501,9.7049,5.85983Zm-288.9223-5.46529-.94055-1.62205c3.24139-1.87975,6.56878-3.7215,9.88885-5.47307l.87512,1.65776c-3.29858,1.74008-6.60357,3.56947-9.82342,5.4373Zm269.41272-5.78476c-3.31091-1.73465-6.70337-3.42582-10.08386-5.02636l.80188-1.69437c3.40338,1.61107,6.81958,3.31367,10.15161,5.06023ZM654.14435,174.0248l-.80689-1.69255c3.38049-1.61153,6.843-3.17775,10.29163-4.65517l.73779,1.72321c-3.42535,1.46728-6.86493,3.023-10.22253,4.62445Zm229.1922-4.95451c-3.4455-1.46324-6.96607-2.8743-10.46466-4.19521l.66271-1.75387c3.52149,1.3296,7.06678,2.75073,10.53425,4.22358ZM674.76471,165.1941l-.66779-1.752c3.50775-1.33739,7.09424-2.62166,10.65961-3.81761l.59588,1.77768c-3.54107,1.1876-7.10333,2.46365-10.5877,3.79187Zm187.4768-4.08673c-3.54254-1.1749-7.15741-2.293-10.74475-3.32331l.51813-1.80146c3.61121,1.03712,7.24982,2.16259,10.81616,3.34527Zm-166.15478-3.06562-.52362-1.79965c3.60522-1.049,7.28418-2.03854,10.93426-2.94157l.45038,1.81978c-3.62585.897-7.28,1.88014-10.861,2.92138Zm144.53943-3.14206c-3.61945-.88287-7.31348-1.70443-10.97864-2.44178l.36981-1.83809c3.68988.74238,7.40863,1.56988,11.0528,2.45826Zm-122.709-2.25692-.37622-1.83626c3.67523-.75246,7.42194-1.44081,11.13611-2.04634l.30206,1.85C725.28924,151.212,721.56775,151.8958,717.91717,152.64277Zm100.66236-2.18044c-3.68671-.58768-7.43476-1.10853-11.1402-1.547l.22058-1.86189c3.73016.44167,7.50342.96573,11.21436,1.558Zm-78.46662-1.4367-.227-1.861c3.72925-.454,7.519-.839,11.2638-1.14285l.152,1.8683c-3.72009.30255-7.48461.68427-11.18872,1.13555Zm56.134-1.20876c-3.71644-.28972-7.49427-.5085-11.22809-.64992l.07141-1.87379c3.75854.1428,7.561.363,11.30224.65449Zm-33.71857-.61377-.07691-1.87286c3.74848-.1547,7.557-.23618,11.31965-.24257l.00274,1.87469c-3.73743.00641-7.52118.08742-11.24542.24074Z" transform="translate(-144.55603 -123.1929)" fill="#ccc"/><circle cx="530.38349" cy="297.68538" r="180.90894" fill="#3f3d56"/><ellipse cx="466.17488" cy="297.68538" rx="96.07861" ry="132.16663" fill="#fff"/><ellipse cx="434.32575" cy="325.68538" rx="26.81427" ry="42.18085" fill="#3f3d56"/><circle cx="885.81702" cy="196.65475" r="17.80969" fill="#11067d"/><circle id="c" cx="680.09215" cy="26.24586" r="26.24586" fill="#11067d"/><circle id="c1" cx="662.70442" cy="581.35092" r="17.80969" fill="#11067d"/></svg>
</div>

.rotate {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:orbit;
-moz-animation-duration:5s;
}
#-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg); -webkit-transform-origin: 50% 50%; }
to { -webkit-transform:rotate(360deg); -webkit-transform-origin: 50% 50%; }
}
#-moz-keyframes orbit {
from { -moz-transform:rotate(0deg); -moz-transform-origin: 50% 50%; }
to { -moz-transform:rotate(360deg); -moz-transform-origin: 50% 50%; }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<g class="rotate">
<g>
<circle fill="#FFFFFF" cx="250" cy="250" r="220.797"/>
<circle fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7.0069,7.0069" cx="250" cy="250" r="220.797"/>
</g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="363.787" cy="63.876" r="23.894"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="418.655" cy="394.851" r="21.239"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="85.911" cy="105.469" r="21.239"/>
</g>
<g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="199.608" cy="294.041" r="150.885"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -43.6117 23.8941)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="137.843" cy="303.338" rx="85.912" ry="96.809"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -45.7056 14.6961)" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="75.344" cy="312.744" rx="16.372" ry="24.336"/>
</g>
</g>
</svg>
Your svg code was not correct. So I create new one. I used Keyframe animation where I mentioned rotate css and most important transform-origin.

SVG element rotate on circle

So I have a SVG element - big circle - and group of elements inside .
I would like to rotate this elements around this big circle. The code is very simply, but I'm already freaking out how to set this circle (graph__skils) on correct path (big circle). As you can see on link below this small circle isn't rotating correct on the big circle. Please help
Circle rotate jsfiddle
HTML file
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg"
width="670"
height="696"
viewBox="0 0 670 696">
<g>
<g class="graph__middle">
<path fill="#3f9" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<path fill="none" stroke="#cf9" stroke- linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<path fill="#cf9" d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
</g>
</g>
</g>
</g>
</svg>
SCSS file
.graph {
position: relative;
width:500px;
height:500px;
svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
&__design {
position: relative;
}
&__skills {
transform-origin: center;
position: absolute;
animation: mercury-group 18s linear infinite;
}
&__middle {
position: relative;
}
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

The center of the svg element is not the center of your planets. You will need to change the transform-origin to 345px 328px. In order to calculate the new center I've used the getBBox() method for the graph__middle
.graph {
position: relative;
width: 500px;
height: 500px;
}
.graph svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
.graph__design {
position: relative;
}
.graph__skills {
transform-origin: 345px 328px;
position: absolute;
animation: mercury-group 18s linear infinite;
}
.graph__middle {
position: relative;
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg"
width="670"
height="696"
viewBox="0 0 670 696">
<g>
<g class="graph__middle" id="KK">
<path fill="red" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<path d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
</g>
</g>
</g>
</g>
<circle cx="345" cy="328" r="3" />
</svg>
</section>

You can rotate the big circle instead like below:
.graph {
position: relative;
width: 500px;
height: 500px;
}
svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
.graph__design {
position: relative;
transform-box:fill-box;
transform-origin: center;
animation: mercury-group 18s linear infinite;
}
.graph__skills {
transform-origin: center;
position: absolute;
}
.graph__middle {
position: relative;
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="696" viewBox="0 0 670 696">
<g>
<g class="graph__middle">
<path fill="#3f9" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<path fill="none" stroke="#cf9" stroke- linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<path fill="#cf9" d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/>
</g>
</g>
</g>
</g>
</svg>
</section>

SVG example
My example doesn't answer exactly your question but I hope you take some ideas from my answer.
Judging by the names of the animation mercury-group you want to create a model of the solar system.
I propose a variant of the animation of the rotation of the planet around the sun.
I located the center of rotation of the planets of the solar system in the center of the sun which has coordinates x =" 250 " y =" 175 " center of the sun
Therefore, the animation team of the rotation of the planet around the sun has the following form:
<animateTransform
attributeName="transform"
type="rotate"
values="0 250 175;360 250 175"
dur="12s"
repeatCount="indefinite"
/>
Filters and gradients are used to design the appearance of the planet and the sun.
Animation of the ripple of the sun and changing its color
<radialGradient id="gradSun">
<stop offset="80%" stop-color="yellow">
<animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="gold" >
<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
</stop>
</radialGradient>
Below is the full animation code for the rotation of the planet around the sun:
.solar-system{
background-color:#002;
width:100%;
height:100%;
}
.sun{
fill:url(#gradSun);
filter:url(#dropShadow2);
}
.Earth-orbit{
stroke:rgba(255,255,255,.4);
stroke-width:1;
fill:none;
}
.Earth{
filter:url(#dropShadow1);
fill:url(#gradEarth);
}
<div class="solar-system">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 400" >
<defs>
<filter id="dropShadow1"
x="-20%" y="-20%"
width="150%" height="150%">
<feGaussianBlur stdDeviation="1" />
</filter>
<filter id="dropShadow2"
x="-20%" y="-20%"
width="150%" height="150%">
<feGaussianBlur stdDeviation="4" />
</filter>
<radialGradient id="gradSun">
<stop offset="80%" stop-color="yellow">
<animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="gold" >
<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
</stop>
</radialGradient>
<linearGradient id="gradEarth">
<stop offset="40%" stop-color="dodgerblue"></stop>
<stop offset="100%" stop-color="yellowgreen" ></stop>
</linearGradient>
</defs>
<!-- planet rotation animation -->
<g>
<animateTransform
attributeName="transform"
type="rotate"
values="360 250 175;0 250 175"
dur="12s"
repeatCount="indefinite"
/>
<circle class="Earth-orbit" cx="250" cy="175" r="90" />
<circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)" />
</g>
<circle class="sun" cx="250" cy="175" r="20" />
</svg>

First, You must set key frames then use css animation
#-webkit-keyframes rotated {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}
#keyframes rotated {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}
Then use animation in css
.bg-shape{
animation: rotated 35s linear infinite;}
Then in html use svg image to rotate
<div class="col-lg-4">
<div class="inner-wrapper text-center">
<div class="mb-3">
<img src="../img/svg/shape-37.svg" alt="" class="bg-shape">
</div>
</div>
</div>

Why doesn't a circular SVG look like a circle with animation?

.refresh-wrap {
width: 200px;
height: 200px;
border: 3px dotted red;
}
.refresh-wrap .svg-icon {
animation: rotatefresh 1s infinite linear;
transform-origin: 50% 50%;
}
#keyframes rotatefresh {
100% {
transform: rotate(360deg) translateZ(0);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
<symbol viewBox="0 0 24 24" id="icon-refresh">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>刷新</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-refresh_Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-refresh_拍品详情-出价" transform="translate(-339.000000, -867.000000)" fill="#FF9A00"
fill-rule="nonzero">
<g id="icon-refresh_提交" transform="translate(0.000000, 701.000000)">
<g id="icon-refresh_刷新" transform="translate(339.000000, 166.000000)">
<path d="M12.2016807,24 C11.700628,24 11.2941176,23.5855666 11.2941176,23.0740726 C11.2941176,22.5625785 11.700628,22.1481451 12.2016807,22.1481451 C17.706141,22.1481451 22.184847,17.5790883 22.184847,11.9629708 C22.184847,8.33764134 20.2716461,4.95675165 17.1914975,3.13925865 C16.7578056,2.88337408 16.6094934,2.31702211 16.8600332,1.87425184 C17.1111393,1.43178418 17.6671484,1.28016825 18.1002471,1.53638297 C21.739344,3.68332633 24,7.67876817 24,11.9629983 C23.999973,18.6002881 18.7070599,24 12.2016807,24 Z"
id="icon-refresh_Shape"></path>
<path d="M6.81501566,22.5882353 C6.67498165,22.5882353 6.53257464,22.5554577 6.39963265,22.486312 C2.45209185,20.4339192 0,16.3780143 0,11.9013052 C0,5.33882725 5.29295139,0 11.7983174,0 C12.2993711,0 12.7058824,0.409760463 12.7058824,0.915487094 C12.7058824,1.42121373 12.2993711,1.83097419 11.7983174,1.83097419 C6.29384538,1.83097419 1.81512991,6.34851245 1.81512991,11.9013051 C1.81512991,15.6896036 3.89023824,19.1217826 7.23155824,20.8585859 C7.67706218,21.0904498 7.85196313,21.6423643 7.62210564,22.0917571 C7.4614157,22.4070474 7.14354146,22.5882353 6.81501566,22.5882353 Z"
id="icon-refresh_Shape"></path>
<path d="M17.1246966,7.05882353 C16.6329542,7.05882353 16.2352941,6.66118273 16.2352941,6.17041419 L16.2352941,2.32065794 C16.2352941,1.82988938 16.640232,1.41176471 17.1319744,1.41176471 L20.9916537,1.41176471 C21.4833961,1.41176471 21.8823529,1.82922947 21.8823529,2.31999801 C21.8823529,2.81076655 21.4833961,3.22823132 20.9916537,3.22823132 L18.0140991,3.22823132 L18.0140991,6.17044058 C18.0140991,6.66118275 17.6164391,7.05882353 17.1246966,7.05882353 Z"
id="icon-refresh_Shape"></path>
<path d="M6.86796299,22.5882353 L3.00832963,22.5882353 C2.51659643,22.5882353 2.11764706,22.1898582 2.11764706,21.6965763 C2.11764706,21.2032944 2.51659643,20.8049173 3.00832963,20.8049173 L5.98593424,20.8049173 L5.98593424,17.8341355 C5.98593424,17.3408537 6.38358686,16.9411765 6.87532006,16.9411765 C7.36705326,16.9411765 7.76470588,17.3408537 7.76470588,17.8341355 L7.76470588,21.7036072 C7.76473236,22.1968891 7.35969619,22.5882353 6.86796299,22.5882353 Z"
id="icon-refresh_Shape"></path>
</g>
</g>
</g>
</g>
</symbol>
</svg>
<div class="refresh-wrap">
<svg class="svg-icon" width="200" height="200">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-refresh"></use>
</svg>
</div>
I use SVG to loading. But I found that if you use animation, SVG will shake.
Environment:
Both PC and Mobile

Chaining Multiple CSS Animations on SVG in Infinite Loop

I have two animated svg's, with two separate animations. I would like to chain them (and maybe more in the future) — infinite on one element. I would prefer CSS only.
I have tried to chain them like this question Chaining Multiple CSS Animations, but it seems that it is harder with the infinite loop — or there might be something wrong with my #keyframes (too simple).
The code can be found here: https://codepen.io/Miet/pen/bWWONo
The HTML:
<?xml version="1.0" encoding="utf-8"?>
<div class="svg-container">
<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="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
<g>
<path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
/>
<path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C27.3,12.1,28.4,13.2,29.9,13.2"/>
<path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
<path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
<path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C13.6,20.5,14.8,21.6,16.2,21.6"/>
<path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
<stop offset="0.2597" style="stop-color:#EE3251"/>
<stop offset="1" style="stop-color:#F47529"/>
</linearGradient>
<polyline class="st1" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
</svg>
</div>
<div class="svg-container">
<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="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
<g>
<path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
/>
<path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C27.3,12.1,28.4,13.2,29.9,13.2"/>
<path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
<path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
<path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C13.6,20.5,14.8,21.6,16.2,21.6"/>
<path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
<stop offset="0.2597" style="stop-color:#EE3251"/>
<stop offset="1" style="stop-color:#F47529"/>
</linearGradient>
<polyline class="st2" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
</svg>
</div>
The CSS:
svg {
width: 20em;
display: block;
margin: 5em auto;
padding: 1rem;
}
.svg-container {
width: 49%;
display: inline-block;
min-width: 21em;
}
g {
cursor: pointer;
}
.st0 {
fill:#EE3251;
}
.st1,
.st2 {
stroke-dasharray: 60;
fill: none;
stroke: url(#SVGID_1_);
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st1 {
animation: dash 4s infinite ease-in-out alternate;
}
.st2 {
animation: dashLong 2500ms infinite linear;
}
#keyframes dash {
from {
stroke-dashoffset: 200;
}
}
#keyframes dashLong {
from {
stroke-dashoffset: 120;
}
}

SVG animatetransform rotation, not working perfectly on ie and firefox

I'm trying to animate a simple svg image using
I've got 4 petals (polygonal shapes), a Circle , and a rectangle. I want to rotate the petals around the circle,
My code is as follows
<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="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
#Circleelement {
transform-origin: center;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<g id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>
Result on various browsers are:-
The animation works perfectly on google chrome.
Elements are dislocated and Animation is partial on Firefox and safari.
Image is dislocated in IE.
I've to use this svg animation in a website.
Please Help me resolve this issue.
Thanks in advance

Currently what Chrome does is wong per the w3c specifications.
The version below works on Firefox and might work on Chrome if they changed to match the spec. Alternatively the spec might change to match Chrome in which case Firefox would likely change to match Chrome and the specification. Life is tough as the bleeding edge of specification and UA development.
<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="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
#Circleelement {
transform-origin: center;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<g transform="translate(-100, -100)">
<svg id="Circleelement" x="100" y="100" width="400" height="400">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
</svg>
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

I fixed the cross platform issue by using GreenSock TweenMax,
var $flower=$('#flower');
TweenMax.to($flower,5,{rotation:360,transformOrigin:"116 116", repeat: -1,ease:Linear.easeNone} );
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.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="0 0 700 500" style="enable-background:new 0 0 0 0;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #A9A9AD;
}
.st1 {
fill: #FEF058;
}
</style>
<g id="flower">
<g id="petals">
<g id="petal4" onclick="notify(this,"select");">
<path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
<polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 " />
</g>
<g id="petal3" onclick="notify(this,"select");">
<path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
<polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 " />
</g>
<g id="petal2" onclick="notify(this,"select");">
<path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
<polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 " />
</g>
<g id="petal1" onclick="notify(this,"select");">
<path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
<polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 " />
</g>
</g>
</g>
<circle class="st1" cx="250.4" cy="250.6" r="47.9" />
<rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

Resources