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