Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mkahraman

SVG element transform; unexpected results

Recommended Posts

#updating gsap from 2.1.3 to latest version resolved the issue

When I try to move an <g> element to desired position, it works as expected within react storybook component. However, when export to an app, it adds css transform which is not what I wanted.

 

TweenLite.set(target, {
                css: {
                    x: 264,
                    y: 12,
                    opacity: 1
                }
            });

 

 react storybook element;  correct behavior

<g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1000; opacity: 1; cursor: pointer; touch-action: none; user-select: none;">
    <foreignObject width="1" height="1" x="362" y="331">
        <div id="selectableItem-0">
            <div style="height: 1px; width: 1px;"></div>
        </div>
    </foreignObject>
    <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340
			m -35, 0
			a 35,35 0 1,0 70,0
			a 35,35 0 1,0 -70,0" fill="#00B6F1"></path>
</g>

exported component in an App;  incorrect behavior

 

<g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1001; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1); opacity: 1; cursor: pointer; touch-action: none; user-select: none;">
    <foreignObject width="1" height="1" x="362" y="331">
        <div id="selectableItem-0">
            <div style="height: 1px; width: 1px;"></div>
        </div>
    </foreignObject>
    <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340
			m -35, 0
			a 35,35 0 1,0 70,0
			a 35,35 0 1,0 -70,0" fill="#00B6F1"></path>
</g>

the difference is inside style attr

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1)

 

no idea, what causes this. 

 

will appreciate if you can give me some hints

 

these do not help either 

 

 
            TweenLite.to(target, 0,{
                    x: 264,
                    y: 12,
                    opacity: 1
            });
 
 
TweenLite.set(target, {
                css: {
                    transform: `matrix(1, 0, 0, 1, ${moveToX}, ${moveToY})`,
                    opacity: 1
                }
            });
Link to post
Share on other sites

updating gsap from 2.1.3 to latest version resolved the issue

  • Like 2
Link to post
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.

×