我正在测试Snap SVG及其相当不错的SVG库,但我无法在Chrome中使用它,但它在Safari,Firefox和Opera中正常运行。你可以看到它here。
以下是生成SV的JS文件
(function () {
var s = Snap('#snap'),
grid = 160,
imgSize = 130,
outerSize = 100,
innerSize = 90;
var team = {
person1: {
img: 'person1_bnw.jpg',
color: 'person1_color.jpg',
x: grid,
y: 0
},
person2: {
img: 'person2_bnw.jpg',
color: 'person2_color.jpg',
x: grid*2,
y: 0
}
// I removed rest of the members, but this is the idea
};
for (member in team) {
createMember(team[member]);
}
function createMember(member) {
var img, outer, mask, bnw, color, colorMask;
var showMatrix = new Snap.Matrix();
showMatrix.scale(1, 1, member.x + 130 /2, member.y + 130 /2);
var hideMatrix = new Snap.Matrix();
hideMatrix.scale(2, 2, member.x + 130 /2, member.y + 130 /2);
img = s.image('img/' + member.img, member.x, member.y, imgSize, imgSize);
mask = s.rect(member.x + 20, member.y + 20, innerSize, innerSize)
.transform('r-45')
.attr({ fill: '#fff' });
img.attr({ mask: mask });
if (member.color) {
color = s.image('img/' + member.color, member.x, member.y, imgSize, imgSize);
colorMask = s.rect(member.x + 20, member.y + 20, innerSize, innerSize)
.transform('r-45')
.attr({ fill: '#fff' });
color.attr({ mask: colorMask, transform: 's0', opacity: 0 });
}
outer = s.rect(member.x + 15, member.y + 15, outerSize, outerSize)
.transform('r-45')
.attr({
'fill-opacity': 0,
'stroke-width': 2,
'stroke-opacity': 0.5,
'stroke': '#000'
});
if (member.color) {
outer.mouseover(function () {
img.animate({ transform: hideMatrix, opacity: 0 }, 200, mina.bounce, function () { img.attr({ transform: 's0' }) });
color.animate({ transform: showMatrix, opacity: 1 }, 200, mina.bounce);
});
outer.mouseout(function () {
img.animate({ transform: showMatrix, opacity: 1 }, 200, mina.bounce);
color.animate({ transform: hideMatrix, opacity: 0 }, 200, mina.bounce, function () { color.attr({ transform: 's0' }) });
});
}
}
})();
您也可以查看GitHub仓库:https://github.com/mupkoo/snap-team