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不分层。