php画矢量图,SVG（可缩放矢量图形）基本图形绘制方法与path路径命令

SVG(Scalable Vector Graphics)可缩放矢量图形

用于描述二维矢量图形的一种图形格式

很早之前SVG就出现了

相比于canvas，它更适合作一些小图标icon等等

HTML5支持内联SVG

它的优点如下：可伸缩

可通过文本编辑器创建和修改

可被搜索、索引、脚本化或压缩

可在任何的分辨率下被高质量地打印

可在图像质量不下降的情况下被放大

canvas是js动态绘图，而svg是XML文档来描述绘图

svg-icon网址：传送门

下面我们来看一下如何使用svg绘图

创建svg

和canvas类似，首先需要在html文档中创建标签

也可以指定width与height属性

(canvas与svg如果不指定宽高，默认300×150)

不过它还有另外一种使用的形式(viewbox属性)，可以看看我的另一篇文章：传送门

接下来的图形绘制和canvas很像了，就多解释了

区别是以XML标签的形式写在svg标签内部

而且为svg的css样式指定宽高不会使它等比缩放

基本图形绘制

直线

x1,y1 起始坐标

x2,y2 终点坐标

还需要指定css样式才能够画出来line { stroke: #000;}

(样式属性参考canvas环境对象中的属性)

矩形

x,y 矩形起始坐标

width,height 矩形宽高

rx,ry 矩形圆角rect { stroke: #000; fill: transparent;}

这里要注意矩形有默认的样式 fill: #000;

下面的也都一样

圆形

r 半径

cx,cy 圆心坐标circle { stroke: #000; fill: transparent;}

椭圆

rx,ry 长半径/短半径

cx,cy 圆心坐标circle { stroke: #000; fill: transparent;}

折线

points指定折线经过的点

横纵坐标空格隔开

多个坐标间逗号隔开polyline { stroke: #000; fill: transparent;}

多边形

和上面的折线差不多

只不过它的终点会连接起点

形成闭合的效果

类似于canvas中的closePath()polygon { stroke: #000; fill: transparent;}

文本

hello world!

x,y 文本起始坐标(左下)text { font-size: 30px;}