// 首先让我们创建绘图表面有的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原创,转载请注明出处。