Я пытаюсь поместить скрипт SNAP svg в div и потеряюсь относительно того, как я должен это делать. Прямо сейчас вот html, с которым я работаю:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>OH SNAP SVG 2014</title>
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script>
<style>
body{
background:#FFF;
}
</style>
</head>
<body>
<script>
var paper= Snap(700,600);
var c = paper.image("clock machine.svg", 200,100,500,480);
var b = paper.image("new years ball.svg", 406,20,200,200);
var p = paper.image("button.svg", 258,508,35,35);
var l = paper.image("lights.svg",406,20,200,200);
var g = paper.group(b,l);
var clickFunc= p.click
g.transform("R90");
p.click(function(){
g.animate({transform : "t0,227" }, 5000, mina.easein );
T.animate({transform : "t-2557,0,"}, 4900,mina.linear);
});
g.attr({x:250})
var T = paper.image("LCD Text.svg", 620,453,2500,85).attr({
fill: "#3FFF9B"
});
var c = paper.rect(365, 454, 263, 85, 3).attr({mask:T,
fill:"#3FFF9B"
});
</script>
</body>
</html>
Это то, что у меня есть до сих пор. Кто-нибудь знает, как я конкретно помещу это в div? Я прочитал документацию и попробовал пару вещей, но мои результаты были бесполезны. Любая помощь была бы очень обязательна.
Вы можете поместить тэг svg внутри div и прикрепить к нему, чтобы он выглядел как...
<div id="mydiv">
<svg id="mysvg"></svg>
</div>
s = Snap("#mysvg");
s.rect(100,100,200,200);
Пример jsfiddle здесь показывает выше с помощью css на div.