Coder Social home page Coder Social logo

Comments (3)

aibosan avatar aibosan commented on July 20, 2024

I could not replicate this problem. You could try resetting the time to 0 and exporting again.

from anigen.

doctormo avatar doctormo commented on July 20, 2024

Interesting, once closed, re-opened and set to zero as you say. The problem has gone away. I wonder what it was.

from anigen.

aibosan avatar aibosan commented on July 20, 2024

SVG animations are problematic, as they work on various levels. Basically, XML animations (animate element) get written into the XML tree on the fly. But transformations (and motion along path) don't. CSS animations (also the animate element) also don't, but instead of an attribute in DOM, they have to be squeezed out of the browser's "calculated CSS values". Oh, and paths' "d" animations have to be calculated manually because google decided to phase out pathData, because... well... I don't know. They are just kinda stupid, I suppose.

Anyway. Because of this, when exporting, the animations have to be removed one by one, each time using the right approach to push the animated values into the XML tree. When this is done, the XML gets put through a canvas (which can't do most of the animations SVG can) to export the PNG. Since this method is destructive, the original SVG has to be cloned, but because animations might have already been running inside it, some of the XML data might have already been changed. Furthermore, once the XML gets cloned, there's no way to tell what the original values were.

I've been trying to find a solution for this, but each time I do, it breaks another aspect of the whole thing. Obviously, the method used in 0.8.0 isn't ideal either. Just keep this thing in mind if this kind of thing happens in the future, and try to avoid animations with non-zero value at t=0. Those can be an issue. Unless they're not. Like I said, it's a mess.

from anigen.

Related Issues (13)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.