SVG入门

SVG简介

简介

使用XML描述的矢量文件
位图：基于颜色的描述 bmp、png、jpg等
矢量图：基于数学的描述 svg、ai等
W3C标准(1.1) https://www.w3.org/TR/SVG11/
浏览器支持 https://caniuse.com/#search=svg

使用方式

1.浏览器直接打开
2.在HTML中使用<img>标签引用
3.直接在HTML中使用SVG标签
4.作为CSS背景

svg的基本图形和属性

基本图形和属性

1.基本图形

1	<rect> <cricle> <ellipse> <line> <polyline> <polygon>

（曲线一般用<path>绘制，<path>可以绘制任意图形）

<rect> 矩形
x,y,width,height,rx,ry
x,y 定义了坐标,矩形左上角的位置
width,height 定义了宽高
rx,ry 定义了圆角
<circle> 圆形
cx,cy,r
cx,cy 圆心位置
r 半径
<ellipse> 椭圆形
cx,cy,rx,ry
cx,cy 圆心坐标
rx,ry 半径
<line> 直线
x1,y1,x2,y2
描述两个点(x1,y1)，(x2,y2)
<polyline> 折线
points
格式:(xi,yi)+
描述多个点
<polygon> 多边形
points
格式:(xi,yi)+
描述多个点，会把最后一个点和第一个点连起来形成一个封闭的图形

2.基本属性
fill、stroke、stroke-width、transform
填充、描边和变换
fill 填充颜色
stroke 描边颜色
stroke-width 描边粗细
transform 变形，其坐标与其父坐标相对变换值

svg基本操作API

3.基本操作API

// 创建图形
document.createElementNS(ns,tagName)
// 添加图形
element.appendChild(childElement)
// 设置/获取属性
element.setAttribute(name,value)
element.getAttribute(name)

综合例子：简单的svg编辑器

根据慕课网课程整理