TweenMax.js变换旋转在IE浏览器无法正常工作9

Question

我试图动画一些SVG元素使用Tweenmax.js

风车旋转工作正常，但门打开动画没有（风车，开门）在Internet Explorer在所有的工作9.

这里是我的代码：

var dooropen = $('#door-open'); 
 

 
var windmill = $('#windmill'); 
 

 
function DoorOpen() { 
 
    TweenMax.to(dooropen, 3, { 
 
    rotationY: 180, 
 
    transformOrigin: "0% 0%" 
 
    }); 
 
} 
 

 

 
function rotateFan() { 
 
    TweenMax.to(windmill, 40, { 
 
    rotation: 360, 
 
    transformOrigin: "51% 64%" 
 
    }); 
 
} 
 

 

 

 

 

 
$('.run').click(function() { 
 
    DoorOpen(); 
 
    rotateFan(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="887.996" height="567.947"> 
 

 
    <path fill="#231F20" d="M89.917 99.025h31.58v468.42h-31.58z" /> 
 

 
    <g id="windmill" fill="#FFF" stroke="#231F20" stroke-miterlimit="10"> 
 
    <path d="M105.706 116.57s-50.877-56.142 0-115.79c0 0 47.368 57.894 0 115.79zM105.707 116.57s73.15-19.732 103.088 52.726c0 0-73.114 15.808-103.088-52.727z" /> 
 
    <path d="M105.707 116.57S76.25 186.372.71 165.385c0 0 32.528-67.36 104.997-48.817z" /> 
 
    </g> 
 

 
    <path fill="#FFF" stroke="#231F20" stroke-miterlimit="10" d="M485.496 162.376h402v402h-402z" /> 
 
    <path fill="#231F20" d="M567.496 266.376h246v298h-246z" /> 
 

 
    <g id="door-open"> 
 
    <path fill="#B51543" d="M567.496 266.376h246v298h-246z" /> 
 
    <path fill="#841C3F" d="M791.496 419.376c0 2.762-2.238 5-5 5h-26c-2.762 0-5-2.238-5-5v-26c0-2.762 2.238-5 5-5h26c2.762 0 5 2.238 5 5v26z" /> 
 
    </g> 
 

 
</svg> 
 

 
<a href="javascript:void(0);" class="run">Run</a>

Answer 1

它看起来像你的问题在于你的混音字符串值与数字的值。默认的转换原点是百分比50% 50% 0。因此，GSAP中最好使用基于百分比或数值的变换原点。

像@Tahir Ahmed所说的那样，最好使用双值语法。即使第三个参数被接受。无论如何，第三个值将自动默认为零，因为这是规格0的默认值。并且仅在使用3D变换时才是必需的，因为它将自身与Z轴对齐。你不能在SVG中使用它，因为SVG不支持CSS 3D变换。

看一看在变换原点规格：

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

试试这个：

var dooropen = $('#door-open'); 
var windmill = $('#windmill'); 

function DoorOpen() { 
    TweenMax.to(dooropen, 3, { 
     rotationY: 180, 
     transformOrigin: "0% 0%" /* top and left, omit 0 since is the default */ 
    }); 
} 

function rotateFan() { 
    TweenMax.to(windmill, 40, { 
     rotation: 360, 
     transformOrigin: "51% 64%" 
    }); 
} 

$('.run').click(function() { 
    DoorOpen(); 
    rotateFan(); 
}); 

tranform-origin关键字等价物：

• 左= 0％
• 中心= 50％
• 右= 100％
• 顶= 0％
• 底部= 100％

还检查了CSSPlugin Docs和使用的SVG变换起始

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

GSAP svgOrigin财产，从CSSPlugin Docs采取：

[仅限SVG元素]作品完全一样transformOrigin但它使用SVG的全球坐标空间，而不是元素的局部坐标空间。例如，如果你想让一堆SVG元素围绕一个公共点旋转，这可能非常有用。您可以定义svgOrigin或transformOrigin，但不能同时使用（出于显而易见的原因）。

See codepen example here of svgOrigin。

如果您想旋转svgElement，就好像它的原点在SVG画布的全局坐标中的x:250, y:100一样，那么您可以执行TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"})。单位不是必需的。它还将值记录在data-svg-origin属性中，以便它可以重新解析。svgOrigin不支持基于百分比的值。

Answer 2

如果您尝试对SVG元素的rotationY进行动画制作，那就是问题所在 - SVG规范NOT完全允许3D。这不是一个GSAP问题或限制 - 它实际上是SVG规范。一些webkit浏览器在技术上可以识别3D CSS转换，但这是非标准的，它在IE中绝对不支持，因为IE忽略了SVG元素上的所有CSS转换。应该通过“变换”属性应用变换，该变换同样不支持3D。

我的建议：不要在SVG中做3D。我希望我对你有更好的消息。