Question

我正在尝试使用SMIL在对象中心周围进行缩放转换动画，它适用于Firefox 38，但不适用于Chrome 43，在Chrome中CSS转换原点属性似乎因某种原因被忽略

原始

<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>

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

我需要这种方法才能在Chrome中使用，因为它是最干净/最简单的。

我尝试过其他类似的工作：

试验＃1

<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>

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);

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

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

试验＃2

<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>

xs@(_:xs')

有什么想法吗？感谢。

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>

我根本不认为它很苛刻。

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

1 个答案: