Equal manipulation of DOM and SVG elements

[StarGaming]

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.

 

[ZachSaucier]

Hey StarGaming!

 

If I understand what you're doing, this post will be very useful for you. Let us know if you have any more questions!

[StarGaming]

Hey StarGaming!

 

If I understand what you're doing, this post will be very useful for you. Let us know if you have any more questions!

 

Hey! I think it´s not. Sorry...

 

I'll try to take an example on codepen ... 

[OSUblake]

Please provide a CodePen. Your code is incomplete, and it's really hard to tell what/how you are doing certain things.

 

Working with transformed elements can be very tricky. One thing to keep in mind is that getBBox isn't going to be of much use as it doesn't take into account transforms.

 

To help you get started, check out this post.

http://greensock.com/forums/topic/13681-svg-gotchas/?p=57453

 

I know it doesn't explain a whole lot, but check out the CodePen. SVG does have some built in features to help you figure out where a transformed point is.

See the Pen f4eb73885cf82831fcd8b30539a32901?editors=0010 by osublake (@osublake) on CodePen

[OSUblake]

There's a secret tool that can help you, but I don't know if I'm allowed to share what it is, so I'll let them chime in and decide on that.

 

If not, here's something I used in the past to help figure out SVG transforms and coordinates. Inspect it in your console to get the code.

http://www.kevlindev.com/gui/utilities/viewbox/viewBox.svg