StarGaming

Hey! I think it´s not. Sorry... I'll try to take an example on codepen ...

Hello I have 2 elements in DIV container with a fixed size: DIV#edit_rect and G#svg1 (inside SVG with width and height set like in container). Positions and sizes are equal (by .set()). I need to rotate, move and scale this 2 elements. But can't set right position of one of them. This is small part of the code. I hope you understand what I mean. <div style="width:530px; height:630px;"> <svg width="530" height="630" viewBox="0 0 530 630"> <g id="svg1"><path d="M53.2,17.1c0.3-3.8,0-3,1.4-6.8c1.4-3.8-0.8-6.3-0.8-6.3c0.6,3.1-0.2,2.4-1.6,6.1 C50.8,14,52.5,15.4,53.2,17.1z"></path><path d="M41.7,42.4c-0.4-4.2,0.1-8.3,1.1-12.1c-2.1-7.6-0.5-12.3-0.5-12.3c-0.6,4.1-0.2,7.8,0.8,11.1 c2-7.2,5.3-12.5,5.3-12.5c-1.8,15,3.1,18.6,10.8,27.6c7.6,9,10.8,18.2,11.2,23.3C71.4,84.1,59,90.4,54.3,93.8 c3.6-2.7,6.1-12.9,1.8-22.8C51.8,61.1,43.2,55.3,41.7,42.4z"></path><path d="M65.8,87.3c5.2-6.3,8.5-15.8,6.9-25.1c-1.6-9.3-11.8-20-16.4-25.6c1.6,1.8,3.9,3.3,12,10.5 c7.1,6.3,10,14.5,9.6,19.9C77.3,79.2,65.8,87.3,65.8,87.3z"></path><path d="M35.5,79.5c-8.5-14.8-1-33.9,3.6-40.4c-0.1,4.8,0.4,9,3.4,15.8c3,6.9,9.3,14.4,11.1,17.8 c5.2,11.4-1.9,21.8-1.9,21.8c-19.7-0.9-23.5-16.3-24.2-24.5C28.9,74.1,32.8,77.9,35.5,79.5z"></path><path d="M58.2,16.6c-0.2,4.1-2.2,7.2-3.3,9.5c-2.1,4.3-0.4,8.7-0.4,8.7c-4.9-7.2-4.3-10.2-1.5-17.3 c2.7-6.7,0.9-11.4,0-13.6c5,7.7,4.1,12.1,3.2,15.5C56.9,18.7,57.6,17.7,58.2,16.6z"></path></g> </svg> <div id="edit_rect"></div> </div> var params = { },setAngle = function(angle) { TweenMax.set("#svg1",{rotation:angle, transformOrigin:"50% 50%"}); TweenMax.set("#edit_rect",{rotation:angle, transformOrigin:"50% 50%"}); }, setSize = function(w,h) { TweenMax.set("#svg1",{ scaleX:(w/params.width), scaleY:(h/params.height), transformOrigin:"50% 50%" }); TweenMax.set("#edit_rect",{ width:w, height:h, x:(params.Cx - w / 2), y:(params.Cy - h / 2), transformOrigin:"50% 50%" }); }, setPosition = function(posX,posY) { TweenMax.set("#svg1",{x:(posX - params.offsetX), y:(posY - params.offsetY), transformOrigin:"50% 50%"}); TweenMax.set("#edit_rect",{x:posX, y:posY, transformOrigin:"50% 50%"}); } params.offsetX and params.offsetY - are the x,y from getBBox() of #svg1. Movement working fine and visual positions of 2 elements are equal until it resized or rotated. After resize or rotation i need to change params.offsetX and params.offsetY! How? Thanks. Sorry for my english.