<svg id="ssvg" width="300" height="300" style="border: 1px solid gray;">
	<circle id="yuan" cx="150" cy="150" r="5" fill="snow" />
</svg>

<script>

let sepan = () => {
	/* 彩虹颜色数组 */
	let colors = ['red','orange','yellow','green','cyan','blue','purple'];
	/* 获取svg宽高 */
	let ww = ssvg.getAttribute('width') || 200,
		hh = ssvg.getAttribute('height') || 200;
	/* 圆心坐标和圆半径取svg宽高最短边值 */
	let c = r =  ww > hh ? hh / 2 : ww / 2;
	let a = 360 / 7; /* 角度 : 圆周七等分 */
	yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */
	yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */
	/* 用 for 循环依次绘制七个三角形 */
	for(j = 0; j < 7; j++) {
		let color = colors[j]; /* 取颜色 */
		let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */
		let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */
		/* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */
		let x1 = c + r * Math.cos(Math.PI / 180 * a1),
			x2 = c + r * Math.cos(Math.PI / 180 * a2),
			y1 = c + -r * Math.sin(Math.PI / 180 * a1),
			y2 = c + -r * Math.sin(Math.PI / 180 * a2);
		/* 创建svg path元素 */
		let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		/* 设置 path d 路径属性值 */
		path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 1 ${x2} ${y2} L${c} ${c}`);
		/* 设置 path 填充颜色 */
		path.setAttribute('fill', color);
		/* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
		ssvg.insertBefore(path, yuan);
	}
};

sepan();/* 运行绘制彩虹伞函数 */

</script>