-4

I've never done JS before and I was just learning CSS now, but stumbled upon this animation tutorial and wanted to try it. http://goinkscape.com/how-to-animate-icons-with-inkscape-and-snap-svg/ It didn't work tho :< (blank page output) ... I think it's because I have to extract the JS var so I can output it. I looked for solutions here on SO and tried document.getElementById('iconDiv').innerHTML = s; but that didn't work. Any help is appreciated.

<!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>

I went back and did it again as follows:

  1. Made a 100x100 pixel blue square. Set ID:blueRect, Label: #blueRect. enter image description here
  2. Made a 50x50 pixel white square. Set ID:whiteRect, Label: #whiteRect. enter image description here
  3. Grouped them and set ID:icon, Label: #icon.
  4. Saved icon.svg as Plain SVG in the same folder where my index.html file is.
  5. Downloaded Snap.svg and put snap.svg-min.js in the same folder where my index.html file is.

  6. Opened icon.svg in notepad:

    "id="whiteRect" width="13.229167" height="13.229167" x="6.6145835" y="277.15625"

I don't know why those are the numbers (same as from my first trial) since I specifically put my squares at 0,0 this time ... I even saved a copy with a different name. Still getting those numbers, but whatever...

  1. Copy pasted the html code directly from the website and changed the y first to 277.15625, then to 0.

  2. Set the other y to 270, then -15.

icon.hover(function() { whiteRect.animate({y:-15}, 500, mina.elastic);

Both times, got a blank page.

ecg8
  • 1,362
  • 1
  • 12
  • 16
Raksha
  • 1,572
  • 2
  • 28
  • 53
  • quick to downvote, but not even the slightest hint on my question ... real helpful ... – Raksha Apr 29 '18 at 19:45
  • You're getting downvoted because you haven't posted a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – bejado Apr 29 '18 at 19:46
  • i posted a link to all the code .... you want me to copy paste it here?.. – Raksha Apr 29 '18 at 19:46
  • 1
    @bejado You can type `[mcve]` in the comments and it renders the same. :) – Ivar Apr 29 '18 at 19:47
  • Ah, brilliant! @Ivar – bejado Apr 29 '18 at 19:47
  • 1
    @Raksha — You need to provide a [mcve] in the question itself (not a copy/paste of all of your code, just what is required to demonstrate the problem) along with **a clear problem statement** (which "it didn't work" is not). Do some debugging. Quote any messages show in the Console of the browser's Developer tools. Use the Network tab to make sure that all the external files are loading. etc. – Quentin Apr 29 '18 at 19:50
  • @Quentin, "it does work" as in "it doesn't output anything" ... there are no messages. It just loads a blank page. And I've been trying to find the answer for like an hour now ... – Raksha Apr 29 '18 at 19:51
  • I don't know how I'm supposed to debug a tutorial ... I was doing it because I wanted to learn something ... Now I haven't learned anything and just wasted my time ... so I guess I won't be wasting more time here since clearly noone is willing to help .... – Raksha Apr 29 '18 at 19:57
  • 1
    There's nothing wrong with the tutorial. We can't tell what you did wrong based on the information you've provided. – Quentin Apr 29 '18 at 20:51
  • @Quentin, have you done the tutorial? It worked for you?... I just did it again and nothing changed... – Raksha Apr 29 '18 at 22:27

1 Answers1

1

Did you look in your console? And does your console display the following error?

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

This is caused by the line <script src="snap.svg-min.js"></script> where you are trying to load a local file via html. It would be a security risk if people could load their local files to a website. To solve this, run a HTTP server with cors (cross origin resource sharing) enabled. Here I'm using the http-server that can be installed with npm. I am listening to port 8000, and running the server from the same directory (note the period) as the files.

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

Also, in your index.html, you need to change all references to local directories to http://localhost:8000/<file name here>. Afterwards, instead of opening up the index.html locally, you would browse to http://127.0.0.1:8000/ to see the animation. This is what worked for me, at least on IE. Chrome seems to be stricter on cors, and I haven't figured out how to get past it. I haven't tried Firefox.

Mushu909
  • 1,194
  • 2
  • 11
  • 16
  • I don't know where I can see those messages. I'm using PyCharm for editing because that's the only thing I have other than a notepad >.> ... and I can't run html code in PyCharm <.< at least not that I know how... But there was a command "open in terminal" and it didn't give any error and actually opened it in EI %\ .... I haven't even thought about checking if it worked in EI cuz up till now everything that worked in Chrome, didn't in EI %\ ... but I think you're right. Though just opening it from folder gives Activex control warning and doesn't load the animation. – Raksha Apr 30 '18 at 03:11
  • Thanks for your help. At least now I know I'm not crazy XD ... Now to figure our what all you said because I don't really know what any of it means +.+ ... But at least now I know roughly what the problem is. – Raksha Apr 30 '18 at 03:12