Question

我之前从未做过JS，现在我只是在学习CSS，但偶然发现了这个动画教程，并想尝试一下。 http://goinkscape.com/how-to-animate-icons-with-inkscape-and-snap-svg/ 它没有工作：＆lt; （空白页面输出）......我认为这是因为我必须提取JS var以便输出它。我在SO上寻找解决方案并尝试了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。
在我的index.html文件所在的文件夹中将icon.svg保存为普通SVG。
下载Snap.svg并将snap.svg-min.js放在index.html文件所在的文件夹中。
在记事本中打开icon.svg：

＆＃34; ID =＆＃34; whiteRect＆＃34; 宽度=＆＃34; 13.229167＆＃34; 高度=＆＃34; 13.229167＆＃34; X =＆＃34; 6.6145835＆＃34; Y =＆＃34; 277.15625＆＃34;

我不知道为什么这些是数字（与我的第一次试验相同），因为我这次特意把我的方块放在0,0 ......我甚至保存了一个不同名称的副本。仍然得到这些数字，但无论如何......

复制直接从网站粘贴html代码并将y首先更改为277.15625，然后更改为0.
将另一个y设置为270，然后设置为-15。

icon.hover（function（）{ whiteRect.animate（{y：-15}，500，mina.elastic）;

两次都有一个空白页。

Answer 1

你看到你的控制台了吗？您的控制台是否显示以下错误？

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这是由您尝试通过html加载本地文件的行<script src="snap.svg-min.js"></script>引起的。如果人们可以将他们的本地文件加载到网站，那将是一种安全风险。要解决此问题，请运行启用了cors（跨源资源共享）的HTTP服务器。这里我使用的是可以用npm安装的http服务器。我正在侦听端口8000，并从同一目录运行服务器（注意句点）作为文件。

http-server . -o --cors -p 8000

此外，在index.html中，您需要将对本地目录的所有引用更改为http://localhost:8000/<file name here>。之后，您将浏览http://127.0.0.1:8000/以查看动画，而不是在本地打开index.html。这对我有用，至少在IE上是这样。 Chrome似乎对cors更严格，我还没弄清楚如何克服它。我还没试过Firefox。

如何在HTML中引用JS var？

1 个答案: