如何在HTML文件中制作外部SVG文件的动画？

Question

I have a HTML file named index.html as follows. 我有一个名为index.html的HTML文件，如下所示。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        path {
            fill: none;
            stroke: black;
            stroke-width: 3;
        }
    </style>

</head>
<body>
    <object type="image/svg+xml" data="test.svg"></object>
    <img src="test.svg" />

    <p><button class="animate">Animate</button></p>
    <script>
        (function () {
            var button = document.querySelector('.animate');
            button.onclick = function (event) {
                var paths = document.querySelectorAll('path');
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    var length = path.getTotalLength();
                    // Clear any previous transition
                    path.style.transition = path.style.WebkitTransition = 'none';
                    // Set up the starting positions
                    path.style.strokeDasharray = length + ' ' + length;
                    path.style.strokeDashoffset = length;
                    // Trigger a layout so styles are calculated & the browser
                    // picks up the starting position before animating
                    path.getBoundingClientRect();
                    // Define our transition
                    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
                    // Go!
                    path.style.strokeDashoffset = '0';
                }
            };
        }());
    </script>
</body>
</html>

and a SVG file named test.svg as follows. 以及一个名为test.svg的SVG文件，如下所示。

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />

  <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />

  <path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />

  <path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />

  <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />

  <path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />

</svg>

Question 题

I viewed index.html on Chrome but the animation does not work. 我在Chrome上查看了index.html ，但动画不起作用。 Both files are in the same directory. 这两个文件都在同一目录中。

What is the proper way to animate the loaded SVG? 为已加载的SVG设置动画的正确方法是什么？ As a note, I can animate when the SVG are copied and pasted to the HTML file as an inline SVG. 请注意，当将SVG复制并作为嵌入式SVG粘贴到HTML文件时，可以设置动画。

Answer 1

You have 2 documents (the html document and the object document) and you need to treat them as such. 您有2个文档（html文档和对象文档），因此需要将它们视为此类文档。 Styles from one document don't apply to the other so... 一个文档中的样式不适用于另一文档，因此...

First we define the svg namespace and then move the path styles to the test.svg file so that becomes 首先，我们定义svg命名空间，然后将路径样式移动到test.svg文件，以便

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <style>
      path {
          fill: none;
          stroke: black;
          stroke-width: 3;
      }
  </style>

  <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />

  <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />

  <path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />

  <path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />

  <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />

  <path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />

</svg>

Then we need to change the animation code to extract the object's document. 然后，我们需要更改动画代码以提取对象的文档。 Note we cannot do this with an img element so I've removed that. 请注意，我们无法使用img元素执行此操作，因此已将其删除。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
    <object type="image/svg+xml" data="test.svg"></object>

    <p><button class="animate">Animate</button></p>
    <script>
        (function () {
            var button = document.querySelector('.animate');
            button.onclick = function (event) {
                var object = document.querySelector("object");
                var doc = object.contentDocument;
                var paths = doc.querySelectorAll('path');
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    var length = path.getTotalLength();
                    // Clear any previous transition
                    path.style.transition = path.style.WebkitTransition = 'none';
                    // Set up the starting positions
                    path.style.strokeDasharray = length + ' ' + length;
                    path.style.strokeDashoffset = length;
                    // Trigger a layout so styles are calculated & the browser
                    // picks up the starting position before animating
                    path.getBoundingClientRect();
                    // Define our transition
                    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
                    // Go!
                    path.style.strokeDashoffset = '0';
                }
            };
        }());
    </script>
</body>
</html>

Answer 2

As you mentioned, the svg works just fine, so as long as your file names + directory are correct, it should have no issue animating it. 正如您提到的，svg可以正常工作，因此只要您的文件名+目录正确，对其进行动画处理就不会有问题。

 var paths = document.querySelectorAll('path'); var button = document.querySelector('.animate'); button.onclick = function() { for (var i = 0; i < paths.length; i++) { var path = paths[i]; var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition = 'none'; // Set up the starting positions path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's'; // Go! path.style.strokeDashoffset = '0'; } }

 path { fill: none; stroke: black; stroke-width: 3; }

 <p><button class="animate">Animate</button></p> <svg width="100" height="100" viewBox="0 0 100 100"> <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" /> <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" /> <path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" /> <path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" /> <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" /> <path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" /> </svg>

如何在HTML文件中制作外部SVG文件的动画？

问题描述

Question 题

2 个解决方案

解决方案1
3 已采纳 2019-02-08 22:45:36

解决方案2
0 2019-02-08 20:55:08

如何在HTML文件中制作外部SVG文件的动画？

问题描述

Question 题

2 个解决方案

解决方案1 3 已采纳 2019-02-08 22:45:36

解决方案2 0 2019-02-08 20:55:08

解决方案1
3 已采纳 2019-02-08 22:45:36

解决方案2
0 2019-02-08 20:55:08