Question

我遇到了问题。我用另一个程序进行了scetch，并将其另存为svg。
现在我想将文件包含在网站上。
我创建了一个div，并为其指定了ID，然后在该div中加载带有js的svg文件。现在，我想为svg设置动画，但是我无法引用使用getElementById添加到div的svg对象。
我只是拉一个Null对象。

我的index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" media="screen" 
       href="css/main.css" />

    <script src="js/jQuery.js"></script>
    <script src="js/fire_animation.js"></script>
    <script src="js/main.js"></script>
</head>
<body>

    <div id="middleFire"></div>

</body>
</html>

Main.js

$(document).ready(function(){

    fireInit();

});

$(window).on("load", function(){

    fireAnimation();

});

fire_animation.js

fireInit = function(){
    $("#middleFire").load("res/fire_all_finish.svg");
}

fireAnimation = function(){
    console.log(document.getElementById("middleFireSrc"));
}

MiddleFireSrc是另一个文件中svg元素的ID

谢谢你的脚跟：）

Answer 1

页面加载时触发窗口“加载”事件。 SVG加载时不会触发。

但是jQuery load()方法可以在加载完成时采用回调函数。

尝试一下：

fireInit = function(){
    $("#middleFire").load("res/fire_all_finish.svg", fireAnimation);
}

js svg对象引用

1 个答案: