Snap SVG屏蔽在Chrome 34中无法正常工作

时间:2014-05-07 11:12:44

标签: javascript google-chrome svg snap.svg

我正在测试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

0 个答案:

没有答案