Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

320
Views
svg trigger animation issue (svgator)

Can you tell me why this example http://www.silkcutz.co.uk/test/ taken from here https://github.com/SVGator/trigger-animation which uses (logo.svg with ID "e6flsqoxhzzs1") works absolutely fine....

BUT http://www.silkcutz.co.uk/test/2.html (using Untitled.svg with ID "eOKHP9YQpje1") doesnt, this is a very simple animation of a box moving position (just for test purposes).

Both html files are very simple and should require only the filename and ID changing but the examples 2.html... you would think the svg has issues but when testing the SVG file (Untitled.svg) using the upload svg facility on the live demo here https://www.svgator.com/help/getting-started/svgator-player-js-api it work fine and is triggered as expected!

Any help would be very much appreciated!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

To use the technique described there, you need to export the SVGator project using "Animation start: On click".

But programmatic animation has been recently implemented. Check these resources: https://www.svgator.com/help/getting-started/animate-programmatically https://www.svgator.com/help/getting-started/svgator-player-js-api

Here's a complete example on how to use Player API with a SVG embedded in an tag:

<!DOCTYPE html>
<html>
   <head>
      <title>Testing SVG</title>
      <script>
         //Wait for the document to load
            document.addEventListener("DOMContentLoaded", function() {
                //grab the <object> element
                let object1 = document.getElementById('animated-svg');

                //Wait for the content of the <object> to load
                object1.addEventListener("load", function() {
                    //grab the <svg> element
                    let svg = object1.contentDocument.getElementById('e5478wvxh25l1');

                    //Wait for the SVGtor player to be ready for use
                    svg.svgatorPlayer.ready(function(player) {
                        //inset your code here; i.e.
                        player.play();
                    });
                });
            });
      </script>
   </head>
   <body>
      <object id="animated-svg" type="image/svg+xml" data="animated.svg" style="height: 857px;"></object>
   </body>
</html>

It's also worth knowing that no matter how you set the "Animation start", you always have access to the Player API and can control the animations as a PRO user.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!