Search the Community
Showing results for tags 'circle start'.
Found 1 result
-
Hey fellow GreenSockers. I was going to post this in the SVG Gotchas thread, but this question is asked a lot around here so I thought maybe a new topic would be the way to go. SVG circles start at 3 o’clock and most people want to animate the stroke from the 12 o’clock position. Conventional wisdom would tell you to simply rotate the circle by -90 degrees and you’re all set, but there are some problems with this approach. Using GSAP to rotate the circle -90 degrees will work perfectly fine in Chrome and FF, but Safari will ignore that set() for some reason. (IE and Edge honor the rotation, but they have another problem.) You can simply add a transform attribute directly to the circle like <circle cx="500" cy="75" r="60" transform="rotate(-90 500 75)"/> This will work correctly in Chrome, FF and Safari, but not completely in IE and Edge. If you're animating the stroke with DrawSVG, IE and Edge need the stroke-dasharray set to 0 in the attributes or they will cause problems. If you don’t add that attribute, a regular circle will start at 9 o’clock and the circle that you’ve rotated -90 degrees with GSAP or a transform attribute will start at 6 o’clock. Strangely, if you resize the browser window to the point of the SVG changing size, IE and Edge will correct themselves. The only bulletproof way I see to draw a circle stroke from the 12 o’clock position with DrawSVG in all browsers is transforming the circle -90 degrees and adding the extra attributes to keep IE and Edge happy. <circle cx="500" cy="225" r="60" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(-90 500 225)"/> It appears that only adding the stroke-dasharray attribute fixes the IE/Edge issues, but I also add a stroke-dashoffset="0" attribute also just to be safe. Check out the demo in all your browsers. Hopefully this helps somebody with this type of animation. Happy tweening.
- 18 replies
-
- 3
-
-
-
- drawsvg
- circle start
- (and 2 more)
