0

TL;DR: Animating transform attribute on an SVG.Set doesn't act as expected, see https://codepen.io/AlexisBRENON/pen/LyPZRG when you hover the svg. Are there some bugs in my code?

Full version:

I'm trying to animate a simple SVG logo, in a similar way as the 'Abstergo' logo in 'Assassin's Creed' games (https://youtu.be/vbLz8JzFGXo). The SVG has been drawn with Inkscape, and then exported as 'optimised SVG' to remove most of the Inkscape's namespace stuff. I don't want to use SVG.js to draw my SVG, just to animate it. As you can see here (https://codepen.io/AlexisBRENON/pen/LyPZRG), the first translate animation works well, but I apply it to each part separately. Then, the rotate transform, applied to the SVG.Set, works for only 4 of the 5 parts, but when you move your mouse out of the SVG, all parts are affected by the reversed animation, before all the things collapse in some very strange animations...

By the way, the 'mouseover', 'mouseout' events seem to be triggered even when you just move your mouse over the SVG, which lead to strange behaviours when you don't stop to move your mouse. Any idea to fix this?

Kind regards, Alexis

AlexisBRENON
  • 2,921
  • 2
  • 18
  • 30
  • mouseover fires every time the mouse moves over an element *or any of its children*. You probably wanted mouseenter/mouseleave instead? – Paul LeBeau Apr 12 '17 at 15:01
  • Thanks for the info. Is there a place where to find these events, they're not listed on the W3C documentation? https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents – AlexisBRENON Apr 15 '17 at 19:04
  • It's in the [DOM Level 3 Events spec](https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter). – Paul LeBeau Apr 15 '17 at 19:31
  • Dont use absolute tranformations. They are error prone and most likely do not yield the expected result. Use relative transformations instead which most likely will work as expected – Fuzzyma May 03 '17 at 10:53

0 Answers0