【发布时间】：2018-10-09 23:07:07
【问题描述】：
我以前从未做过 JS，现在我只是在学习 CSS，但偶然发现了这个动画教程并想尝试一下。 http://goinkscape.com/how-to-animate-icons-with-inkscape-and-snap-svg/ 它不起作用：document.getElementById('iconDiv').innerHTML = s;，但没有奏效。 任何帮助表示赞赏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inkscape Animated Icon Snap</title>
<!--We need to add the Snap.svg script to our document-->
<script src="snap.svg-min.js"></script>
<script>
//Run script right away
window.onload = function () {
//We'll be appending the icon to this DIV later
var s = Snap("#iconDiv");
//Have Snap load the SVG file
Snap.load("icon.svg", function(f) {
//Assign the white rectangle
whiteRect = f.select("#whiteRect");
//Assign the whole icon group
icon = f.select("#icon");
//When the icon is hovered over, have the white rectangle move up slightly with elastic properties
icon.hover(function() {
whiteRect.animate({y:960}, 500, mina.elastic);
},
//And return to original position when not hovered over
function() {
whiteRect.animate({y:977.36218}, 500, mina.elastic);
}
);
//Finally append the icon to iconDiv in the body
s.append(f);
});
};
</script>
</head>
<body>
<!--Here's the DIV that will hold the animated SVG icon-->
<div id="iconDiv"></div>
</body>
</html>
我回去又做了一次如下：
- 制作了一个 100x100 像素的蓝色方块。设置 ID：blueRect，标签：#blueRect。
- 制作了一个 50x50 像素的白色方块。设置 ID：whiteRect，标签：#whiteRect。
- 将它们分组并设置 ID：icon，标签：#icon。
- 将 icon.svg 作为普通 SVG 保存在我的 index.html 文件所在的同一文件夹中。
- 已下载 Snap.svg 并将 snap.svg-min.js 放在我的 index.html 文件所在的同一文件夹中。
-
在记事本中打开 icon.svg：
"id="whiteRect" 宽度=“13.229167” 高度=“13.229167” x="6.6145835" y="277.15625"
我不知道为什么这些是数字（与我第一次试验时相同），因为这次我专门将我的方格放在 0,0 处……我什至保存了一个不同名称的副本。仍然得到这些数字，但无论如何......
直接从网站复制粘贴html代码，先把y改成277.15625，再改成0。
将另一个 y 设置为 270，然后设置为 -15。
icon.hover(函数() { whiteRect.animate({y:-15}, 500, mina.elastic);
两次，都是空白页。
【问题讨论】：
-
快速投反对票，但对我的问题甚至没有丝毫暗示......真的很有帮助......
-
你的投票被否决了，因为你还没有发布 Minimal, Complete, and Verifiable example。
-
@bejado 您可以在 cmets 中键入
[mcve]并呈现相同的效果。 :) -
@Raksha — 您需要在问题本身中提供minimal reproducible example（不是所有代码的复制/粘贴，只是演示问题所需的内容）以及 a明确的问题陈述（“它不起作用”不是）。做一些调试。引用浏览器开发者工具控制台中显示的任何消息。使用“网络”选项卡确保正在加载所有外部文件。等
-
教程没有错。根据您提供的信息，我们无法判断您做错了什么。
标签： javascript html animation svg inkscape