Jump to content
GreenSock

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

Svg moves when applying rotate in Vue Environment

Recommended Posts

watch:{
Value: function(){
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},
ValueOther: function(){
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
}
},
mounted: function(){
// TweenMax.set(this.$refs.middleArrow, {transformOrigin:"middle bottom"})
// Draggable.create(this.$refs.middleArrow, {type: "rotation", throwProps: true, transformOrigin:"50% 50%"});
 
//TweenMax.to(this.$refs.middleArrow, 2, {x: this.MoveNumber(), transformOrigin:"50% 100%"});
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},

 

<polygon ref="dial" fill="black" points="430,350 430,175 410,175 435,115 460,175 440,175 440,350" :stroke="ArrowColorOther" style="stroke-width:5" />

 

I have this polygon that I am rotating when a page is mounted in Vue or when two different values change. If I navigate to the page before the values load the polygon is positioned where it should be. However, if I wait for the values to load and THEN navigate to the page the polygon has moved to the lower left of the svg it is in. I am wondering if there is an issue with rotating an object if it is not actually on the current screen.

 

Thanks for any help!

Share this post


Link to post
Share on other sites

Update: I figured out that when I set the origin to 50% 100% to transform on, it is not rotating by that when it is initially mounted, it rotates around some other origin.

Share this post


Link to post
Share on other sites

Update: The issue is that the polygon rotates around some other origin if that specific page is rendered but not currently the page being displayed. It isn't until the page is the focus or displayed page that it actually rotates around the origin desired.

Share this post


Link to post
Share on other sites
1 hour ago, greg_mich said:

Update: The issue is that the polygon rotates around some other origin if that specific page is rendered but not currently the page being displayed. It isn't until the page is the focus or displayed page that it actually rotates around the origin desired.

Any chance you could provide a reduced test case? I'm curious about this. Keep in mind that some browsers cannot report an SVG's bounding box unless it's visible in the DOM. 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×