// 首先让我们创建绘图表面有的SVG元素
// 如果你想创建新的表面只提供尺寸
// 类似 s = Snap(800, 600);
var s = Snap("#svg");
// 让我们创建中间大圆圈：
var bigCircle = s.circle(150, 150, 100);
// 默认情况下它的黑色，让我们改变它的属性
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
// 现在让我们创建另一个小圈子：
var smallCircle = s.circle(100, 150, 70);
// 让我们把这个小圆圈，另一个成了一团：
var discs = s.group(smallCircle, s.circle(200, 150, 70));
// 现在我们可以改变整个组的属性
discs.attr({
    fill: "#fff"
});
// 现在更有趣的东西
// 让我们指定这个组作为我们大圈口罩
bigCircle.attr({
    mask: discs
});
// 尽管我们小圈子现在是一个组的一部分
// 和口罩的一部分，我们仍然可以访问它：
smallCircle.animate({r: 50}, 1000);
// 我们没有为第二个小圈子参考，
// 但我们可以轻松地使用CSS选择器抢：
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);
// 现在，让我们创建模式
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
        fill: "none",
        stroke: "#bada55",
        strokeWidth: 5
    });
// 创建模式，
// 只是指定图案的方法维度：
p = p.pattern(0, 0, 10, 10);
// 然后使用它作为大圈填充
bigCircle.attr({
    fill: p
});

效果图：

本文由免费oa系统78oa原创，转载请注明出处。