i'm trying make animation using svg ie doesn't playing transformorigin.
it works in chrome , firefox. try in ie see mean. oh, , don't want depend on flash. i'll canvas if required. or shumway.
relevant code
var deg =360; velocity.animate($('#inner').get(), { rotatez: deg }, 1000) <g id="inner" style="transform-origin: 81.0254859924316px 59.6874922621516px 0px;" data-bind="spintriangle:true" id="g3359"> <path d="m 68.010487,-6.3659557 24.050001,0 48.720002,89.4223967 -12.24,22.411139 -97.00001,0 -12.26999,-22.442889 z" id="inlight" style="fill:#a8a9ad;fill-opacity:1" inkscape:connector-curvature="0" /> <path d="m 61.900487,27.282517 36.280001,0 18.150882,34.195786 -18.140882,33.492658 -36.320001,0.0106 l 43.56048,61.650506 z" id="indark" style="fill:#5b5b5b" inkscape:connector-curvature="0" /> </g> ko.utils.injectbinding = function(allbindings, key, value) { //https://github.com/knockout/knockout/pull/932#issuecomment-26547528 allbindings.get = allbindings.get || getfallback; var has = allbindings.has; var = allbindings.get; return { has: function(bindingkey) { return (bindingkey == key) || has.call(allbindings, bindingkey); }, get: function(bindingkey) { var binding = get.call(allbindings, bindingkey); if (bindingkey == key) { binding = value; } return binding; } }; }; var router = { isnavigating: ko.observable(true) }; var v = $.velocity, q = q; v.promise = q.promise; var template = $('img').html(); var tan30 = 0.5773502691896258; ko.bindinghandlers.spintriangle = { init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { var deg = 0; var first = true; var spinfunc = function() { if (ko.unwrap(router.isnavigating) || first) { deg = deg ? 0 : 360; first = false; return v.animate(element, { rotatez: deg }, 1000).then(spinfunc); } }; ko.utils.extend(allbindings, ko.utils.injectbinding(allbindings, 'origin', { spinfunc: spinfunc })); }, update: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { var origin = allbindings.get('origin'); if (ko.unwrap(router.isnavigating)) { origin.spinfunc(); } } }; ko.bindinghandlers.roundrobin = { init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { var forward = 1; var first = true; var arr = _.map($(element).children().get(), function(chel) { return chel; }); arr.push(arr.shift()); arr = _.zip($(element).children().get(), arr); arr = _.map(arr, function(item) { return [item[0].getbbox(), item[1].getbbox(), item[0]]; }); var spinfunc = function() { if (ko.unwrap(router.isnavigating) || first) forward = forward ? 0 : 1; first = false; return q.all(_.map(arr, function(item) { var original = item[0], target = item[1]; el = item[2] if (forward) { return v.animate(el, { translatex: 0, translatey: 0 }, 1000); } else { return v.animate(el, { translatex: target.x - original.x, translatey: target.y - original.y }, 1000); } })).then(spinfunc); }; ko.utils.extend(allbindings, ko.utils.injectbinding(allbindings, 'origin', { spinfunc: spinfunc })); }, update: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) { var origin = allbindings.get('origin'); if (ko.unwrap(router.isnavigating)) { origin.spinfunc(); } } }; ko.components.register('ultraspin', { viewmodel: function(params) { this.scale = 2; if (params.viewmodel) ko.utils.extend(this, params.viewmodel); else ko.utils.extend(this, params); }, template: template }); debugger; ko.applybindings()<script src="http://code.jquery.com/jquery-git.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> <script src="https://rawgit.com/kriskowal/q/v1/q.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script> <img> <svg width="164" height="155"> <g id="g3019" transform="translate(0,5),matrix(0.51365572,0,0,0.48391494,-0.10298261,3.0805811), scale({{scale}})"> <g id="outer" transform="matrix(1,0,0,1.0581278,0,-8.5844007)"> <path style="fill:#a8a9ad;fill-opacity:1" id="outlight" d="m 143.85049,9.0213601 15.99,27.3399999 -63.74,111.31 -32.11,0.01 l 0.20048956,36.37136 16.20049,9.0213601 z" inkscape:connector-curvature="0" /> <path id="outdark" transform="matrix(0.79999999,0,0,0.80001581,0.20048956,0.96136007)" d="m 30.84375,28.96875 21.9375,44.5 l 68.84375,120.125 18,0.0312 l 177.625,44.5 168.75,29 z" style="fill:#5b5b5b" inkscape:connector-curvature="0" /> </g> <g id="inner" style="transform-origin: 81.0254859924316px 59.6874922621516px 0px;" data-bind="spintriangle:true" id="g3359"> <path d="m 68.010487,-6.3659557 24.050001,0 48.720002,89.4223967 -12.24,22.411139 -97.00001,0 -12.26999,-22.442889 z" id="inlight" style="fill:#a8a9ad;fill-opacity:1" inkscape:connector-curvature="0" /> <path d="m 61.900487,27.282517 36.280001,0 18.150882,34.195786 -18.140882,33.492658 -36.320001,0.0106 l 43.56048,61.650506 z" id="indark" style="fill:#5b5b5b" inkscape:connector-curvature="0" /> </g> <g data-bind="roundrobin:true" id="bolts"> <path d="m 68.92049,47.50136 5.68,-9.72 11.12,0.14 5.42,9.56 -5.47,9.68 -11.26,0.01 z" id="bolt1" style="fill:#a8a9ad" inkscape:connector-curvature="0" /> <path d="m 54.04049,71.55136 5.63,-9.65 11.13,0.03 5.43,9.63 -5.34,9.6 -11.51,-0.05 z" id="bolt2" style="fill:#a8a9ad" inkscape:connector-curvature="0" /> <path d="m 89.26049,61.93136 11.19,-0.01 5.56,9.6 -5.4,9.5 -11.42,0.16 -5.38,-9.54 z" id="bolt3" style="fill:#a8a9ad" inkscape:connector-curvature="0" /> </g> </g> </svg> </img> <ultraspin></ultraspin>
aparently gsap, can velocityjs solved problem.
