动画嵌入 svg css + js

Question

我在 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' />

JS：

$(document).ready(function () {

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

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

CSS：

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');
    }
}
});

这应该可以，但不行:(

Answer 1

您可以将样式表放在 svg 文件中的

请注意，通过使用 svg 节点位于不同的文档中。这意味着要让getElementsByTagName(...) 工作，您需要在 svg 文档上调用它，而不是在主文档上。

但是，除非您等待 svg 文档完成加载，否则仅将 document 替换为 document.getElementById('svgsource').getSVGDocument() 并不能保证有效（阅读：您不能从 $(document).ready 执行此操作，请参阅 this answer 了解更多信息详情。

另见How to access the content of the "embed" tag in HTML。