通过KineticJS使用SVG路径资源实现世界地图的效果

body { margin: 0px; padding: 0px; } #tango { position: absolute; top: 10px; left: 10px; padding: 10px; } #container { background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png'); display: inline-block; overflow: hidden; height: 262px; width: 580px; background-position: 1px 1px; } var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 260 }); var mapLayer = new Kinetic.Layer({ y: 20, scale: 0.6 }); /* * loop through country data stroed in the worldMap * variable defined in the worldMap.js asset */ for(var key in worldMap.shapes) { var path = new Kinetic.Path({ data: worldMap.shapes[key], fill: '#eee', stroke: '#555', strokeWidth: 1 }); path.on('mouseover', function() { this.setFill('red'); mapLayer.drawScene(); }); path.on('mouseout', function() { this.setFill('#eee'); mapLayer.drawScene(); }); mapLayer.add(path); } stage.add(mapLayer);