第7天:如何在SVG中复用图像元素

782 阅读1分钟

如何使用SVG绘制太阳图标

让我们画一个简单的太阳图标。我们从一个圆开始画太阳的核心,我们画一条线来画太阳光线。

现在,一旦我们有了一条射线,我们就可以复用同一条线元素来绘制其他射线。我们可以给予这个射线一个 id ,并将其与 use 元素一起复用。

然后,我们可以使用 transform 命令将线移动到正确的位置,方法与处理星星示例的方法相同,不同的是,这一次我们为每条射线增加45度的旋转。

如何使用SVG绘制雪花

我们可以使用相同的技术来定义雪花的分支,然后重复使用它六次来绘制雪花。

前面我们已经介绍了如何绘制基本路径。这里我们以类似的方式绘制分支。我们可以使用move to( M )和line to( L )命令绘制一条简单的线:

然后我们可以继续绘制:

完成的分支看起来像这样:

一旦我们定义了一个分支,我们就可以使用 use 命令多次重用它。