SVG全称:Scalable Vector Graphics,可伸缩矢量图形

SVG既是一种文本格式,也是一种XML语言。每个SVG图像都是使用与HTML类似的标记定义的。

SVG代码可以直接包含在Html中,也可以动态插入到DOM中。

支持除IE8及其之前版本外的所有浏览器。

因为SVG同时是一种XML语言,所以,要记得关闭元素

创建SVG画布

创建了一个SVG元素后,可以将这个元素想象成一张画布,然后我们可以在这张画布画上各种各样的东西。既然是画布,首先自然得有画布的大小。

<svg width="100" height="100"></svg>

如此就创建了一副宽100px、高100px的画布。单位默认为px,可以指定其它单位,如em、pt等。

在画布上画一个简单的圆

有了画布后,我们就可以在画布上画画了。但与普通的画画不同,我们不是用笔去画,而是指挥电脑去画。那如果我要在画布上画一个圆,就要告诉计算机在屏幕上哪个位置(圆心位置)画一个半径为多少的圆。这个对话是通过代码完成的。

要告诉计算机在哪个位置画圆,即给这个圆指定一个屏幕坐标。这就必须先得了解一下计算机的坐标系统。

计算机的坐标系统以坐上角为原点,向右为X轴正轴,向下为y轴正轴。

下面就是在屏幕上画一个圆的代码:

<svg width="400" height="400">
	<circle cx="25" cy="25" r="15" />
</svg>

cx、cy指定了圆心坐标,r指定了半径。

svg标签还可以插入的元素:

  • rect
  • circle
  • ellipse
  • line
  • text
  • path

rect

画矩形

<rect x="40" y="5" width="20" height="30"/>

x、y指定矩形左上角位置,width和height是长、宽

ellipse

画椭圆

<ellipse cx="50" cy="40" rx="30" ry="15"/>

cx和cy指定的是椭圆中心的坐标,rx、ry是两个轴的半径

line

画直线

<line x1="0" y1="0" x2="100" y2="100" stroke="black">

直线两端:(x1, y1) (x2, y2)
注:直线必须要先通过stroke指定了颜色才能显示。

text

画文本

<text x="0" y="0">Hello world</text>

x指定的是文本左上角的位置,y指定的是字体的基线位置。

给SVG元素添加CSS样式

SVG默认使用黑色填充,无描边。下面是常见的SVG属性:

  • fill,填充颜色,可使用RGB或RGBA
  • stroke,可指定颜色值
  • stroke-width,宽度,单位为像素
  • opacity,0.0-1.0,完全透明到不透明

可以使用CSS类,如下:

SVG .test {
	fill:green;
	stroke: orange;
}

因为属性stroke等只有SVG才有效,所以,加了和SVG作为指定。

绘制顺序

如果两个SVG重叠,后画的那个会在前面那个上面。CSS中的z-index在这里不管用。因为SVG不分层。