SVG触发动画问题（SVGATOR）

发布于 2025-01-25 21:13:05 字数 926 浏览 0 评论 0 原文

你能告诉我为什么这个示例从此处取 https://github.com/svgator.com/svgator/trigger-animation 使用（ logo.svg with ID with ID“ e6flsqoxhzzs1”）。

/a>（使用 untitled.svg 带有id“ eokhp9yqpje1”）这是一个非常简单的动画动画（仅出于测试目的）。

两个HTML文件都非常简单，只需要更改文件名和ID，但是示例2.html ...您会认为SVG使用LIVE上的上传SVG设备测试SVG文件（Untitled.svg）时演示在这里 https：// https：///www.svgator.com/hellp/启动/svgator-player-js-api 它可以正常工作，并且按预期触发！

任何帮助将不胜感激！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光沙漏 2025-02-01 21:13:05

要使用在此处描述的技术，您需要使用“动画开始：ON ON ON ON ON ANIMATION：点击”。

但是最近实施了程序化动画。检查以下资源：
https://www.svgator.com/help/getting-started/animate-以编程方式

是一个完整的示例

<!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>

这访问播放器API并可以控制动画作为Pro用户。

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.

回复收藏 0 原文

~没有更多了~