Transform-Origin for CSS Animation on Svg Working in Chrome, Not Ff

transform-origin for CSS animation on SVG working in Chrome, not FF

I have a working example:

http://jsfiddle.net/4h3xL/1/

The problem with this answer is that the x="" and y="" attributes don't work on all svg elements, in your case they are valid on the text element but not the path.

My answer involves css transform: translate(). These values (along with the inline path attribute transform="translate()") get reset when you try to run an animation on the same element, as the animation is also a transform - transform: rotate(). I tried to chain the translate onto the rotate, but this weirdly didn't work in FF either.

I wrapped the path in two g's. The path and the outer group are used for offset/reset alignment, and the middle one for the animation.

Setting transform-origin on SVG group not working in Firefox

I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect.

The solution was to draw the original svg shape so that its centre was at coordinate 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

Then add a group around it and translate to the position you want:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions):

#myObject{
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
    transform: rotate(360deg);
}

Hope that helps.

SVG and FIREFOX and transform origin, why not working?

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>

CSS transform-origin not working on SVG in Chrome

As you have discovered transform-origin has only recently become supported in browsers. So you probably shouldn't try to rely on it just yet.

Both of your "Trial" approaches are commonly used. IMO, the simplest approach is your "Trial #1" version. It's what I most commonly use. The idea is to apply the animation in a coordinate space where the element being scaled sits at the origin.

Here's a slightly simplified version of your sample.

document.querySelector("#trigger").addEventListener("click", function(e){
  if ( e.ctrlKey )    document.querySelector("#triggerScaleOut").beginElement();  else    document.querySelector("#triggerScaleIn").beginElement();
}, false);

<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="triggerContainer" transform="translate(150,150)">        <circle id="trigger" cx="0" cy="0" r="25">
            <animateTransform id="triggerScaleIn" begin="indefinite" values="1; 2" dur="0.5s"                type="scale"                attributeName="transform"                fill="freeze"/>
            <animateTransform id="triggerScaleOut" begin="indefinite" values="2; 1" dur="0.5s"                type="scale"                attributeName="transform"                 fill="freeze"/>
        </circle>    </g></svg>

svg transform-origin problems in firefox

Firefox is behaving correctly as per the spec. Chrome implemented transform-origin early before the spec finalised. It handles percentage values differently to what the final spec specified. AFAIK they have not fixed that yet.

If you want your animation to be compatible with all browsers, don't use percentage values in transform-origin.

transform-origin: 3246px 6271px;

http://codepen.io/anon/pen/MbrWod

SVG transform origin differences in FireFox / Chrome

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.

Transform-Origin for CSS Animation on Svg Working in Chrome, Not Ff