第10天:如何在SVG中使用渐变

658 阅读1分钟

形状的填充可以定义为渐变。今天添加一个3D效果到我们的雪人。

升级圣诞装饰品

让我们升级我们在第一天创建的圣诞装饰品。

我们可以添加一个3D效果,通过填充渐变的主圆。在这里,我们在 defs 节中定义了一个 radialGradient 。它的语法与CSS不同,但功能非常相似。

我们定义了它的ID,中心位置为 cx 和 cy ,设置了它的弧度和停止颜色。

堆雪人

对于雪人,我们画两个具有类似梯度的圆,如下所示。

然后我们为鼻子添加一个多边形,为眼睛添加两个圆,为手臂添加两条线。很简单。