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

Question

我正在尝试使用 SMIL 围绕对象的中心进行缩放动画，它在 Firefox 38 中有效，但在 Chrome 43 中无效，在 Chrome 中 CSS 转换- 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 中工作，因为它是 cleanest/easiest。

我试过其他像这样工作的东西：

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

但它有点老套，我不喜欢它。

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

试用#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 最近才在浏览器中得到支持。所以你现在可能不应该尝试依赖它。

您的两种 "Trial" 方法都很常用。 IMO，最简单的方法是您的 "Trial #1" 版本。是我最常用的。这个想法是在坐标 space 中应用动画，其中被缩放的元素位于原点。

这是您的示例的稍微简化的版本。

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>

我一点都不觉得它有问题。

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

CSS transform-origin not working on SVG in Chrome

svg

google-chrome

smil

css-transforms

svg-animate