Jump to content
Search Community

Equal manipulation of DOM and SVG elements

StarGaming test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

Link to comment
Share on other sites

  • 1 month later...

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...