{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 祖国的老花朵 的问题《How do I create a mouseover animation using Snap S》','https://www.manongdao.com/q-927087.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am creating a hover map animation using Snap.svg, but I seem to be having problems with the animation portion. The map was created in Illustrator and exported as an SVG file and is linked to an HTML page.
Once I add the code below, everything disappears.
veryCold.mouseover(function() {
this.animate({
fill: "#ff0000"
}, 600);
}).mouseout(function() {
this.animate({
fill: "#bada55"
}, 200);
I am new to Stack Overflow, so please let me know if you need any additional information. Any help you can provide will be greatly appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snap.svg</title>
<style>
body {
background: #333;
}
</style>
<script src="Snap.svg-0.4.1/dist/snap.svg.js"></script>
<script src="Snap.svg-0.4.1/dist/snap-min.svg.js"></script>
</head>
<body>
<svg width="0" height="0">
</svg>
<script>
var s = Snap(1080, 700);
Snap.load("BuildingAmerica_ClimateMap_Vector-CJ-20150129-Buttons.svg", function(f) {
var g = f.selectAll("g"),
wra = f.selectAll("path[class='st0']").attr({display: "none",}),
wrb = f.selectAll("path[class='st1']").attr({display: "inline", fill: "#FFFFFF"}),
wrc = f.selectAll("path[class='st2']").attr({"opacity": 0.75}),
wrd = f.selectAll("path[class='st3']").attr({fill: "#63B1C0"}),
wre = f.selectAll("path[class='st4']").attr({"opacity": 0, fill: "#63B1C0"}),
wrf = f.selectAll("path[class='st5']").attr({fill: "#C97F4C"}),
wrg = f.selectAll("path[class='st6']").attr({fill: "#B25415"}),
wrh = f.selectAll("path[class='st7']").attr({fill: "#C87D4B"}),
wri = f.selectAll("path[class='st8']").attr({"opacity": 0, fill: "#C97F4C"}),
wrj = f.selectAll("path[class='st9']").attr({fill: "#8CB533"}),
wrk = f.selectAll("path[class='st10']").attr({"opacity": 0, fill: "#8CB533"}),
wrl = f.selectAll("path[class='st11']").attr({fill: "#EEA135"}),
wrm = f.selectAll("path[class='st12']").attr({"opacity": 0, fill: "#EEA135"}),
wrn = f.selectAll("path[class='st13']").attr({fill: "#6D7CBC"}),
wro = f.selectAll("path[class='st14']").attr({fill: "#323E96"}),
wrp = f.selectAll("path[class='st15']").attr({fill: "#333B97"}),
wrq = f.selectAll("path[class='st16']").attr({"opacity": 0, fill:"#6D7CBC"}),
wrr = f.selectAll("path[class='st17']").attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 0.2709}),
wrs = f.selectAll("path[class='st18']").attr({fill: "none", stroke: "#000000", strokeWidth: 0.4});
s.append(g);
s.append(wrb);
s.append(wra);
s.append(wrc);
var veryCold = s.group(wrn, wro, wrp, wrq);
veryCold.mouseover(function() {
this.animate({
fill: "#ff0000"
}, 600);
}).mouseout(function() {
this.animate({
fill: "#bada55"
}, 200);
var mixedHumid = s.group(wrj, wrk);
var hotHumid = s.group(wrl, wrm);
var hotDry = s.group(wrf, wrg, wrh, wri);
var marine = s.group(wrd, wre);
s.append(wrr);
s.append(wrs);
});
</script>
</body>
</html>
From what you've shared it looks like your code isn't properly formatted.