Javascript 如何在HTML文件中设置外部SVG文件的动画？_Javascript_Animation_Svg

Javascript 如何在HTML文件中设置外部SVG文件的动画？

javascript animation svg

Javascript 如何在HTML文件中设置外部SVG文件的动画？,javascript,animation,svg,Javascript,Animation,Svg,我有一个名为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; }

我有一个名为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>

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

问题我在Chrome上查看了index.html，但动画不起作用。两个文件位于同一目录中

为加载的SVG设置动画的正确方法是什么？请注意，当SVG作为内联SVG复制并粘贴到HTML文件时，我可以设置动画。

正如您所提到的，SVG工作正常，因此只要您的文件名+目录正确，设置动画应该没有问题

var path=document.queryselectoral'path'； var按钮=document.querySelector'.animate'； button.onclick=函数{ 对于变量i=0；i

您有两个文档：html文档和对象文档，您需要将它们视为一个文档。一个文档中的样式不适用于另一个文档，因此

首先，我们定义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>

然后我们需要更改动画代码来提取对象的文档。请注意，我们无法使用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>

函数一加载就运行，但在运行该函数之前，需要等待SVG加载。我建议在元素上使用onLoad属性来触发函数。实际上这可能不是问题，因为您添加了onclick事件。我会写一个答案来解决这个问题。我曾试图复制你的问题，但运气不好。您可以尝试创建一个代码段或JSFIDLE吗？只要文件名正确，加载时就不会出现问题。仔细检查它们的位置和文件名。