0

我正在尝试使用 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 

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>

有任何想法吗？谢谢。

4

1 回答 1

0

正如您所发现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>

我根本不认为它很hacky。

于 2015-07-01T15:48:00.177 回答