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

课堂目标

•理解svg的绘图原理

•可以使用svg绘制基础图形

•可以为svg图形添加样式

知识点综述

•认识svg

•svg图形

•svg样式

•机器人案例

认识svg

SVG是一种XML语言，可以绘制矢量图形。

SVG的优点是缩放不失真，实现了DOM接口，可以鼠标。

SVG的缺点是不适合图形数量较大的场景，比如粒子特效。

svg绘图方式

从svg根元素开始开始绘图。

在svg中，通过不同的元素，绘制不同的图形元素。

在图形元素中，通过不同的属性设置其形状和样式。

svgversion=1.1

baseProfile=full

width=300height=200

xmlns=

rectwidth=100%height=100%fill=red/rect

/svg

svg图形

svg中内置了很多现成的图形元素，可以让我们快速绘图，比如线段line、矩形rect、圆形circle、椭圆形ellipse等；

svg中还有万能型的绘图元素—路径path。

svg图形

re