绘制形状

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

填充颜色

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

线性渐变

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

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就可以了。

查看全部

2

采集

收起

2018-03-22