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!

Link to comment
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.

Link to comment
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.

Link to comment
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
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.
×