svg 学习笔记（各种元素）

来源：互联网发布：网络机房设备方案编辑：程序博客网时间：2024/06/08 09:10

观看者：有xml，javascript基础的同学

目标：掌握svg基础图形

实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。

svg 简单的例子：

<!DOCTYPE html><html><body><svg version="1.1" style="width:100%;height:100%"  xmlns:svg="http://www.w3.org/2000/svg"><path d="M100 5 L5 100 L100 100Z" style="stroke:rgb(99,99,99);stroke-width:2" /></svg></body></html>

svg 比vml更方便，只需将xmlns:svg="http://www.w3.org/2000/svg"添加到svg标签中就可以使用svg：

矩形：

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

rect 元素：
x,y 元素左上角的坐标
width,height 属性可定义矩形的高度和宽度
rx,ry可以修改圆角
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
style中的fill，stroke-width，stroke，opacity也都可以放在style外面当做单独的属性，如：

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

和上面是一样的。

圆形：

<!DOCTYPE html><html><body><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg></body></html>

cx,cy 圆点的 x 和 y 坐标，默认为0,0
r 圆的半径，拥有和上面rect的一样的属性。

椭圆：

<!DOCTYPE html><html><body><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/></svg></body></html>

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
这和vml有很不一样了，vml圆是oval，通过定义长短半轴来确定是不是椭圆。

直线：

<!DOCTYPE html><html><body><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/></svg></body></html>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
当然我很可以用path来取代line

多边形：

<!DOCTYPE html><html><body><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></svg></body></html>

points是定义点的坐标，这个多边形vml里面是没有的。

折线：

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

points定义点的坐标跟vml中polyline一样。

文本：

<!DOCTYPE html><html><body><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><text x='100' y='100' dx='0' dy='0' rotate='30' textLength='100'>hello world</text></svg></body></html>

x,y 定义坐标
dx,dy追加的位移
rotate偏转角度
textLength 文本总长度

关于path 暂时不说了，后面我会结合vml详细讲述。