章节
问答
课签
笔记
评论
占位
占位

SVG星星

要想通过SVG绘制出复杂的图形一般会通过专业的绘图工具Adobe Illustrator之类的,直接会生成svg的文件。当然为了达到更好的触类旁通的学习效果,我还是引入了个svg的简单实现,初步讲解下svg的一些运用

参考右边HTML静态结构代码区域,在圣诞树之上的星星是靠svg实现的,如果需要实现这样一个简单的绘图看看涉及哪些方面的知识点。

在本节中包括了polygon、defs、linearGradient三个小知识点

绘制形状

在svg中绘制多边形的标签是polygon,这是SVG中定义的基本形状,可以通过polygon的points绘制出多边形组成的坐标点,points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边,所以points至少要定义3组坐标才能创建一个三角图形。可以观察下points中是由6组坐标绘制的一个五角星图(当然我是用工具生成的坐标)

填充颜色

默认svg会用是黑色填充颜色,所以我们需要设置新的颜色。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。

线性渐变

使用linearGradient元素即可定义线性渐变,每一个渐变色成分使用stop元素定义

<linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
   <stop offset="0%" stop-color="#FCF0BC"></stop>
   <stop offset="0%" stop-color="#FCF0BC"></stop>
</linearGradient>

1. 渐变色元素必须要放到defs元素中;
2. 需要给渐变色元素设置id值,否则的话,别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下:
offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。
stop-color属性:这个很简单,定义了该成员色的颜色。
stop-opacity属性:定义了成员色的透明度。
x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。
4. 渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?