CSS transform-origin 不适用于 Chrome 中的 SVG

Question

我正在尝试使用 SMIL 为对象中心周围的缩放变换设置动画，它适用于 Firefox 38，但不适用于 Chrome 43，在 Chrome 中，由于某种原因，CSS transform-origin 属性似乎被忽略了

原创

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>

我需要这种方法在 Chrome 中工作，因为它最干净/最简单。

我尝试过其他类似这样的方法：

试用#1​​strong>

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>

但它有点hacky，我不喜欢它。

我也试过加法动画，但是有问题（可能是我的错）

试用#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>

有什么想法吗？谢谢。

Answer 1

正如您所发现的，transform-origin 直到最近才在浏览器中得到支持。所以你可能不应该尝试依赖它。

您的两种“试用”方法都是常用的。 IMO，最简单的方法是您的“试用 #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="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>

我一点也不觉得它很老套。