SVG绘图原理与实践：从基础图形到应用.pptxVIP

使用d3操作svg李伟

课堂目标理解svg的绘图原理可以使用svg绘制基础图形可以为svg图形添加样式

知识点综述认识svgsvg图形svg样式机器人案例

认识svgSVG是一种XML语言，可以绘制矢量图形。SVG的优点是缩放不失真，实现了DOM接口，可以监听鼠标事件。SVG的缺点是不适合图形数量较大的场景，比如粒子特效。

svg绘图方式从svg根元素开始开始绘图。在svg中，通过不同的标签元素，绘制不同的图形元素。在图形元素中，通过不同的属性设置其形状和样式。svgversion=1.1baseProfile=fullwidth=300height=200xmlns=rectwidth=100%height=100%fill=red/rect/svg

svg图形svg中内置了很多现成的图形元素，可以让我们快速绘图，比如线段line、矩形rect、圆形circle、椭圆形ellipse等；svg中还有万能型的绘图元素—路径path。

svg图形rect矩形x|y矩形左上角点位置width|height尺寸circle圆形cx|cy圆心位置r半径path路径d路径形状，大写字母为绝对点位，小写字母为相对点位起点:M|m下一个点:L|l圆弧:A,a二次贝塞尔曲线:Q|q,T|t三次贝塞尔曲线():C