SVG

SVG 是使用 XML 来描述二维图形和绘图程序的语言。
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

 

SVG绘制形状

1、矩形rect

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)" />
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度。
style 属性用来定义 CSS 属性。
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。
CSS 的 stroke-width 属性定义矩形边框的宽度。
CSS 的 stroke 属性定义矩形边框的颜色。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="220" y="20" width="250" height="100" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
</svg>

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

<svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="200" height="200" style="fill: orange; stroke:black; stroke-width:5; opacity:0.5" />
</svg>

CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="20" ry="20" width="200" height="100" style="fill: orange; stroke:black; stroke-width:5; opacity:0.5" />
</svg>

rx 和 ry 属性可使矩形产生圆角。

 

2、圆circle

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <circle cx="100" cy="80" r="60" style="fill:orange;" />
</svg>

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。

 

3、椭圆ellipse
椭圆不同于圆的设置：不同的x和y半径
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="80" rx="80" ry="30" style="fill:#f00;" />
    <ellipse cx="100" cy="80" rx="60" ry="20" style="fill:#f90;" />
</svg>

 

4、线条line
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="100" style="stroke-width:2; stroke:#000;" />
    <line x1="100" y1="100" x2="300" y2="100" style="stroke-width:2; stroke:#000;" />
</svg>

 

5、多边形polygon
points 属性定义多边形每个角的 x 和 y 坐标

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <polygon points="0,0 10,100 200,100 200,0" style="stroke-width:2; stroke:#000;" />
</svg>

 

6、折线polyline
points 属性定义每个点的 x 和 y 坐标

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <polyline points="10,10 10,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</svg>

 

7、路径path
下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg width="100%" height="100%" version="1.1" xmls="http://www.w3.org/2000/svg">
    <path d="M10 10 L50 100 L100 10 Z" />
</svg>

-----以上都是基础的描述，实际项目中没使用过，相关知识之后在慢慢补充-----