Я никогда не занимался JS раньше, и сейчас я только изучал CSS, но наткнулся на этот урок анимации и хотел попробовать его.
http://goinkscape.com/how-to-animate-icons-with-inkscape-and-snap-svg/
Это не сработало: <(вывод на пустую страницу) ... Я думаю, это потому, что мне нужно извлечь JS-переменную, чтобы я мог вывести ее. Я искал решения здесь на SO и пробовал <code>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 пикселей. Установить идентификатор: blueRect, метка: #blueRect.
- Сделано 50x50 пикселей белого квадрата. Идентификатор набора: whiteRect, метка: #whiteRect.
- Сгруппировал их и установил ID: значок, Метка: # значок.
- Сохраняет icon.svg в виде простого SVG в той же папке, где находится мой файл index.html.
- Скачал Snap.svg и поместил snap.svg-min.js в ту же папку, где находится мой файл index.html.
Открыт icon.svg в блокноте:
"ID =" whiteRect»
ширина = "13.229167"
высота = "13.229167"
х = "6.6145835"
у = "277,15625"
Я не знаю, почему это числа (такие же, как в моем первом испытании), поскольку я специально поставил квадраты на этот раз на 0,0 ... Я даже сохранил копию с другим именем. Все еще получаю эти цифры, но что угодно ...
Копия вставила HTML-код непосредственно с веб-сайта и изменила y сначала на 277.15625, затем на 0.
Установите для другого y значение 270, затем -15.
icon.hover (function () {
whiteRect.animate ({y: -15}, 500, mina.elastic);
Оба раза получили пустую страницу.