CSS transform-origin not working on SVG in Chrome

Question

I'm trying to animate scale transformation around the object's center using SMIL, it works in Firefox 38, but not in Chrome 43, in Chrome the CSS transform-origin property seems ignored for some reason

Original

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="scale(1)" style="transform-origin: 150px 150px 0;">
        <circle id="trigger" cx="150" cy="150" 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"/> 
    </g>
</svg>

I need this method to work in Chrome since its the cleanest/easiest.

I have tried other things that work like this:

Trial#1

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="triggerContainerFix" transform="translate(150,150)">
        <g id="triggerContainer" transform="scale(1)">
            <circle id="trigger" cx="150" cy="150" r="25" transform="translate(-150,-150)"/>

            <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"/>
        </g>
    </g>
</svg>

But it's a bit hacky, and i don't prefer it.

I also tried additive animations, but it is problematic (probably my fault)

Trial#2

document.querySelector("#trigger").addEventListener("click", function(e){

  if (e.ctrlKey){
    document.querySelector("#triggerScaleOut").beginElement();
    document.querySelector("#triggerTranslateOut").beginElement();
  }
  else{
    document.querySelector("#triggerScaleIn").beginElement();
    document.querySelector("#triggerTranslateIn").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="scale(1)">
        <circle id="trigger" class="button" cx="150" cy="150" r="25" />
            
        <animateTransform id="triggerTranslateIn" begin="indefinite" values="0,0; -150,-150" dur="0.5s"
            type="translate"        
            attributeName="transform" 
            fill="freeze"
            additive="sum"/>

        <animateTransform id="triggerScaleIn" begin="indefinite" values="1; 2" dur="0.5s"
            type="scale"    
            attributeName="transform"
            fill="freeze"
            additive="sum"/>

        <animateTransform id="triggerTranslateOut" begin="indefinite" values="-150,-150; 0,0" dur="0.5s"
            type="translate"
            attributeName="transform"   
            fill="freeze"
            additive="sum"/>

        <animateTransform id="triggerScaleOut" begin="indefinite" values="2; 1" dur="0.5s"
            type="scale"
            attributeName="transform" 
            fill="freeze"
            additive="sum"/> 
    </g>
</svg>

Any ideas? Thanks.

Answer 1

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>

I don't consider it hacky at all.