SVG绘制饼状图

	// 创建一个XML命名空间
	var svgns = "http://www.w3.org/2000/svg";

	// 创建一个SVG元素指定大小和坐标
	var chart = document.createElementNS(svgns, "svg:svg");	// 创建在svgns命名空间里的svg元素
	// 设置节点的属性
	chart.setAttribute("width", "100%");
	chart.setAttribute("width", "300px");
	// 设置视口大小
	chart.setAttribute("viewBox", "0 0 100% 300px");

document.createElementNS("p","edition");

var e = document.createElementNS("p","edition");
var body = document.getElementsByTagName("body");
body.appendChild(e);

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<path d="
		M20 20
		A6 6 0 1 0 40 20
	"/ stroke="#c9d6d5" fill="none">
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<path d="
		M20 20
		L20 10
	"/ stroke="#c9d6d5" fill="none">
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<path d="
		M20 20
		L20 10
		A10 10 0 0 1 29 16
	"/ stroke="#c9d6d5" fill="none">
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<path d="
		M20 20
		L20 10
		A10 10 0 0 1 29 16 Z
	"/ stroke="#c9d6d5" fill="none">
</svg>
<script>

stroke="#7a7a7a" fill="#c9d6d5" stroke-width="1"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<path d="
		M20 20
		L20 10
		A10 10 0 0 1 29 16 Z
	"/ stroke="#7a7a7a" fill="#c9d6d5" stroke-width="1">
</svg>