SVG and FIREFOX and transform origin, why not working? - css

Question

I have this example svg where flower on coffee mug should spin with transform-origin center.
In other browsers it works like champ but in firefox rotates randomly.
Have anybody else have this problem? Is there any easy fixes or im in s**t? :D
Thanks for all the help guys :) !
<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"
width="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666"
xml:space="preserve">
<style>
#coffeeFlower {
-webkit-animation-name: coffeeFlower-animation;
animation-name: coffeeFlower-animation;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
#keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
<g>
<g>
<g>
<g>
<path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827
c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123
C205.399,185.767,241.826,72.295,402.577,58.794z"/>
<path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262
c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271
C284.65,91.009,324.625,117.573,400.396,115.509"/>
<path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609
c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/>
<path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393
c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799
s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/>
<path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898
c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462
c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/>
<path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958
c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/>
</g>
<path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973
c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351
s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365
s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377
c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/>
<path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88
C440.746,252.962,436.484,220.091,411.361,236.933z"/>
</g>
<g>
<path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566
c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/>
<path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629
c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/>
<path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0
l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/>
</g>
<path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438
s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381
c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/>
</g>
<path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/>
<path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/>
</g>
</svg>
Example code here: https://codepen.io/mrmagnus/pen/jmOVPq

Answer 1

Firefox has the correct behaviour according to the spec. For SVG elements "transform-origin: center" means the centre of the SVG. Chrome has implemented an older version of the spec and is now technically wrong.
In the future, you'll be able to set the box used to calculate percentage (center = 50%) origin values, with the transform-box property.
Until then, if you want compatibility between browsers, you'll need to use absolute coordinates.
transform-origin: 421px 250px;
<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"
width="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666"
xml:space="preserve">
<style>
#coffeeFlower {
-webkit-animation-name: coffeeFlower-animation;
animation-name: coffeeFlower-animation;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 421px 250px;
-ms-transform-origin: 421px 250px;
transform-origin: 421px 250px;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
#keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
<g>
<g>
<g>
<g>
<path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827
c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123
C205.399,185.767,241.826,72.295,402.577,58.794z"/>
<path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262
c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271
C284.65,91.009,324.625,117.573,400.396,115.509"/>
<path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609
c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/>
<path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393
c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799
s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/>
<path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898
c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462
c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/>
<path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958
c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/>
</g>
<path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973
c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351
s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365
s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377
c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/>
<path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88
C440.746,252.962,436.484,220.091,411.361,236.933z"/>
</g>
<g>
<path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566
c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/>
<path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629
c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/>
<path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0
l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/>
</g>
<path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438
s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381
c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/>
</g>
<path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/>
<path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/>
</g>
</svg>

Answer 2

The problem is that Google Chrome has a bugguy interpretation of the CSS style transform-origin: center.
But you can get rid of it and have the same behaviour on both browsers using this technique :
<g transform="translate(411,250)">
<g id="coffeeFlower">
<path transform="translate(-420,-250)"
d="...your yellow flower..."/>
</g>
</g>
The rotation is always computed on (0,0), but you use the trick of the double translation.
You just have to fine tune the translations and it will work like a charm (as you say).
See it in action : https://jsfiddle.net/hvngvz3y/2/