在SVG中，它的世界是无穷大的，我们定义所以图形都会被构建。而我们在浏览器中看到的画面其实是我们定义的视窗和视野。
<svg height="500" width="200"> height和width控制我们的视窗大小
<svg height="500" width="200" viewBox="0 0 500 200" preserveAspectRadtio ="xMidYMid meet" >复制代码viewBox="x,y,width,height" x轴与y轴的值的参照物是<svg>,width和height越大距离svg的视野也越远，width和height越小距离svg的视野也越近。
preserveAspectRadtio : align meetOrSlice align视窗相对视野的方向
svg图形分组
当我们创建完一套图形时候可以对此图形进行定义为分组，并且在后面可以使用<use>进行<g>分组引用。这里我们就要用到<g>
<g><rect width="20" height="100" fill="red" x="0" y="0"><rect width="50" height="10" fill="red" x="0" y="100">
</g>复制代码1.
对<g>设置属性，它的所有子标签都会被继承。2.<g>可以嵌套使用
3.<g>可以使用transform进行坐标转换
<use xlink:href="#"> 分组引用,xlink:href=为<g>标签的id
SVG文本
共有属性：
X: 定位X轴位置
y: 定位Y轴位置
dx: 相对于文本基线位置的X轴偏移
dy： 相对于文本基线位置的Y轴偏移
style: 设置样式
