Javascript 动画嵌入svg css+；js

我在Illustrator中创建了一些路径，并将其导出为.svg。现在我想用css和javascript为这些路径设置动画。我已经找到了一个很好的工具，当我在HTML5中内联加载svg时，它可以正常工作。因为有很多路径（大约500条），我想将其嵌入HTML5。我的问题是：当svg文件嵌入时，我无法访问它。嵌入svg时，如何访问所有路径/线/多边形

HTML:

<embed src="pano_botanique.svg" width="100%" height="100%" ; type="image/svg+xml"      id='svgsource' />

$(document).ready(function () {

    var svgs = document.getElementsByTagName('svg');

    function selfdraw() {
        for (var i = 0; i < svgs.length; i++) {
            svgs[i].classList.add('draw');
        }
    }
});

svg * {
    fill: none;
    stroke: none;
}

.draw * {
    stroke: #3675D8;
    stroke-width: 0.5px;
    -webkit-animation: self-draw 30s ease-in;
    -webkit-animation-fill-mode: backwards;
}

@-webkit-keyframes self-draw {
    0% {
    stroke-dasharray: 0 100%
    }
    40% {
    stroke-dasharray: 100% 0%
    } 
}

var svgs = document.getElementById('svgsource').contentDocument();
svgs.addEventListener('load', function () {
    var svg = svgs.contentDocument();

function selfdraw() {
    for (var i = 0; i < svgs.length; i++) {
        svgs[i].classList.add('draw');
    }
}
});

编辑：

<embed src="pano_botanique.svg" width="100%" height="100%" ; type="image/svg+xml"      id='svgsource' />

$(document).ready(function () {

    var svgs = document.getElementsByTagName('svg');

    function selfdraw() {
        for (var i = 0; i < svgs.length; i++) {
            svgs[i].classList.add('draw');
        }
    }
});

svg * {
    fill: none;
    stroke: none;
}

.draw * {
    stroke: #3675D8;
    stroke-width: 0.5px;
    -webkit-animation: self-draw 30s ease-in;
    -webkit-animation-fill-mode: backwards;
}

@-webkit-keyframes self-draw {
    0% {
    stroke-dasharray: 0 100%
    }
    40% {
    stroke-dasharray: 100% 0%
    } 
}

var svgs = document.getElementById('svgsource').contentDocument();
svgs.addEventListener('load', function () {
    var svg = svgs.contentDocument();

function selfdraw() {
    for (var i = 0; i < svgs.length; i++) {
        svgs[i].classList.add('draw');
    }
}
});

var svgs=document.getElementById（'svgsource'）.contentDocument（）；
svgs.addEventListener（'load'，函数（）{
var svg=svgs.contentDocument（）；
函数selfdraw（）{
对于（变量i=0；i

---

这应该可以，但不能：（

您可以将样式表放在svg文件中的一个元素中

请注意，通过使用svg，节点位于不同的文档中。这意味着要使

getElementsByTagName（…）

正常工作，您需要在svg文档中调用它，而不是在主文档中调用它

但是，只需将

文档

替换为例如

文档。getElementById（'svgsource'）。getSVGDocument（）

不能保证工作，除非您等待svg文档完成加载（阅读：您不能从

$（文档）执行此操作。准备好了吗

另请参见。
感谢您提供的有用链接