html5 svg,circle,g,path

svg 绘制图形的标签

<svg width="1500" height="750"></svg>

定义画布长宽，width和height

---

circle所属svg标签下，用来绘制圆形节点

<circle id="c1" cx="200" cy="100" r="2" fill="yellow" stroke="black" stroke-width="3"/>

定义id为c1，位置为cx，cy，半径r，填充颜色为yellow，边颜色为black，边宽为3像素

---

g所属svg标签下，作为组元素将多个元素结合起来，变为一个整体

<g transform="translate(0,0) rotate(30) scale(0.75)" id="g1"></g>

transform定义平移位置，rotate定义旋转角度，scale定义缩放比例

---

path所属svg标签下，用来绘制自由形态的路径。

<path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" />

d属性代表路径，M代表移动至，L代表划线至，z代表闭合路径