Animate only one path within an SVG without cropping - css
I am using an SVG for my logo and I want to give one of the letters a push-down effect:
body {
background: skyblue;
}
#-webkit-keyframes push {
0%,
25%,
75%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
}
#Path_9-2 {
-webkit-animation: push 2s;
animation: push 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
<defs>
<filter id="Path_9" x="35.958" y="17.221" width="70.528" height="41.57" filterUnits="userSpaceOnUse">
<feOffset dx="2" dy="4" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="1" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
<path id="Path_7" data-name="Path 7" d="M18,17.15a13.73,13.73,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42A4.43,4.43,0,0,0,0,21.71V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62V31.69a6.12,6.12,0,0,1,6.29-6.43c3.69,0,6.17,2.61,6.17,6.43V47.24A4.48,4.48,0,0,0,26,51.86a4.4,4.4,0,0,0,4.49-4.62V30.49c0-8.11-4.9-13.34-12.47-13.34" transform="translate(38.002 19.001)" fill="#fff"/>
<g transform="matrix(1, 0, 0, 1, 38, 19)" filter="url(#Path_9)">
<path id="Path_9-2" data-name="Path 9" d="M84.61,51.79H53.83a17.29,17.29,0,0,1,0-34.57H84.61a17.29,17.29,0,0,1,0,34.57ZM53.83,25.85a8.66,8.66,0,1,0,0,17.32H84.61a8.66,8.66,0,1,0,0-17.32Z" transform="translate(0 0)" fill="#fff"/>
</g>
<path id="Path_10" data-name="Path 10" d="M257.24,44.89,247.72,33l8.44-8.58a4.47,4.47,0,0,0,1.48-3.22,4,4,0,0,0-4.16-4,4.27,4.27,0,0,0-3.14,1.41l-10.59,11A4.9,4.9,0,0,0,238.14,33a5.39,5.39,0,0,0,1.41,3.28l11.32,13.94a4,4,0,0,0,3.35,1.67,4.08,4.08,0,0,0,4.09-4.15,4.41,4.41,0,0,0-1.07-2.82M232.18,0a4.49,4.49,0,0,0-4.56,4.62V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62V4.62A4.4,4.4,0,0,0,232.18,0M202.77,25.39c4.89,0,8.57,3.89,8.57,9.12s-3.68,9-8.57,9-8.58-3.75-8.58-9,3.62-9.12,8.58-9.12m0-8.24c-10,0-17.76,7.57-17.76,17.29A17.35,17.35,0,0,0,202.7,51.79c10,0,17.89-7.7,17.89-17.35s-7.91-17.29-17.82-17.29m-37.06,0a13.72,13.72,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42,4.43,4.43,0,0,0-4.49,4.56V47.24a4.49,4.49,0,0,0,4.56,4.62,4.43,4.43,0,0,0,4.48-4.62V31.69a6.13,6.13,0,0,1,6.3-6.43c3.69,0,6.17,2.61,6.17,6.43V47.24a4.48,4.48,0,0,0,4.49,4.62,4.4,4.4,0,0,0,4.49-4.62V30.49c0-8.11-4.9-13.34-12.47-13.34M139.78,44.89,130.27,33l8.44-8.58a4.47,4.47,0,0,0,1.48-3.22,4,4,0,0,0-4.16-4,4.28,4.28,0,0,0-3.15,1.41l-10.58,11A4.9,4.9,0,0,0,120.69,33a5.43,5.43,0,0,0,1.4,3.28l11.33,13.94a4,4,0,0,0,3.35,1.67,4.08,4.08,0,0,0,4.09-4.15,4.37,4.37,0,0,0-1.08-2.82M114.73,0a4.49,4.49,0,0,0-4.56,4.62V47.24a4.49,4.49,0,0,0,4.56,4.62,4.43,4.43,0,0,0,4.48-4.62V4.62A4.39,4.39,0,0,0,114.73,0" transform="translate(38.002 19.001)" fill="#fff"/>
</g>
</svg>
As you can see the 'o' is cropped when it's being pushed down. Tried using overflow: visible and increasing the height but that didn't help.
I've removed the size and position of the filter. Also I'm using svg{overflow:visible} as you intended. What was cut off was the shadow of the shape. Please take a look.
body{background:skyBlue;}
#-webkit-keyframes push {
0%,
25%,
75%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
}
#Path_9-2{
-webkit-animation: push 2s;
animation: push 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
svg{overflow:visible}
<svg width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
<defs>
<filter id="Path_9" filterUnits="userSpaceOnUse">
<feOffset dx="2" dy="4" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="1" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
<g transform="matrix(1, 0, 0, 1, 38, 19)" filter="url(#Path_9)">
<path id="Path_9-2" data-name="Path 9" d="M84.61,51.79H53.83a17.29,17.29,0,0,1,0-34.57H84.61a17.29,17.29,0,0,1,0,34.57ZM53.83,25.85a8.66,8.66,0,1,0,0,17.32H84.61a8.66,8.66,0,1,0,0-17.32Z" transform="translate(0 0)" fill="#fff"/>
</g>
</g>
</svg>
Related
SVG Animation with CSS and SVG mask
I've started drawing a doughnut in SVG. And for some reason my mask doesnt work when I animate the bigger circle.(Bug on Chrome version 90.0.4430.212) I only plan to animate the bigger circle and not the whole SVG/Doughnut (I don't want the smaller circle to animate I only want the bigger circle to scale). How do you animate SVG elements with a mask?
https://codepen.io/markkkkkkk/pen/oNZWOOx
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
transform-origin: 5px 5px;
animation-play-state: paused;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<circle id="myCircle" cx="5" cy="5" r="4" mask="url(#myMask)" />
</svg>
I would still appreciate an answer about animating the element only and keeping the mask steady.
Just wrap your circle in a <g> element, then apply the mask to that instead.
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
Unfortunately, the bug is affecting this as well. Fixed in Chrome 91.0.4472.77
#myCircle {
animation-name: scaleKeyframe;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 5px 5px;
}
svg:hover #myCircle {
animation-play-state: running;
}
#keyframes scaleKeyframe {
from {
transform: scale(1);
}
to {
transform: scale(0.1);
}
}
<svg viewBox="0 0 40 10">
<mask id="myMask">
<rect width="100%" height="100%" fill="white" />
<circle cx="5" cy="5" r="2" fill="black" />
</mask>
<g mask="url(#myMask)">
<circle id="myCircle" cx="5" cy="5" r="4" />
</g>
</svg>
Why is blue circle not spinning in the center of itself [duplicate]
This question already has an answer here:
CSS transform origin issue on svg sub-element
(1 answer)
Closed 3 years ago.
Why is the blue circle not rotating in the center of its own axis?
Below you can find my previous code.
Here you can see my CSS with the proportionate SVG:
circle {
animation: grow 2s infinite;
transform-origin: center;
}
#keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
<svg xmlns="http://www.w3.org/2000/svg"
width="80"
height="110"
version="1.1">
<rect width="70"
height="100"
x="5"
y="5"
fill="white"
stroke="red"
stroke-width="10"
rx="5"/>
<circle cx="40" cy="105" r="3" fill="blue"/>
</svg>
You need transform-box: fill-box;
circle {
animation: grow 2s infinite;
transform-origin: center;
transform-box: fill-box;
}
#keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="110"
version="1.1"
>
<rect
width="70"
height="100"
x="5"
y="5"
fill="white"
stroke="red"
stroke-width="10"
rx="5"
/>
<circle cx="40" cy="105" r="3" fill="blue" />
</svg>
Because scale in SVG is different, it makes scale in X & Y axis. Additionally it scales "cx" and "cy" properties. The best way is to make "cx" & "cy" at 0 and use the "translate" to coordinates you need <svg xmlns="http://www.w3.org/2000/svg" width="80" height="110" version="1.1"> <rect width="70" height="100" x="5" y="5" fill="white" stroke="red" stroke-width="10" rx="5" /> <circle cx="0" cy="0" r="3" fill="blue" transform="translate(40 105)"> <animateTransform attributeName="transform" type="scale" additive="sum" from="1 1" to="1 1" values="1 1; 0.5 0.5; 1 1" begin="0s" dur="2s" repeatCount="indefinite"> </animateTransform> </circle> </svg> Enjoy!
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>
CSS transform not working with SVG in Firefox
I have this simple hourglass animation made in SVG. The animation works in Chrome but does not work in Firefox. I am applying css transform translate to the #upper-fill-clip and #lower-fill-clip rect.
#keyframes flowdown {
0% {
transform: translateY(18%);
}
100% {
transform: translateY(49.2%);
}
}
#keyframes fillup {
0% {
transform: translateY(86.7%);
}
100% {
transform: translateY(57.7%);
}
}
#keyframes flip {
0% {
transform: rotate(0deg);
}
99.4% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#hourglass {
animation-name: flip;
transform-origin: center center;
}
#hourglass #upper-fill-clip {
animation-name: flowdown;
transform: translateY(18%);
}
#hourglass #lower-fill-clip {
animation-name: fillup;
transform: translateY(86.7%);
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="0" id="upper-fill-clip" />
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip" />
</g>
</g>
</svg>
Inspecting the elements #upper-fill-clip and #lower-fill-clip show that both elements are not getting translated.
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>