<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>svg dom绘制五角星</title>
<style>
#mystar{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
<script>
function createStar(){
var root=document.getElementByIdx_x_x("mystar");
var SVG="http://www.w3.org/2000/svg";
//创建我们的svg元素
var svg=document_createElement_x_xNS(SVG,"svg");
svg.setAttribute("width","100");
svg.setAttribute("height","100");
var polygon=document_createElement_x_xNS(SVG,"polygon");
for(var i=0;i<10;i+=2){
var p=svg.createSVGPoint();
p.x=Math.sin(Math.PI*2/5*i)*50+50;
p.y=Math.cos(Math.PI*2/5*i)*50+50;
polygon.points.appendItem(p);
}
//指定颜色(边框与填充)
polygon.setAttribute("stroke","blue");
polygon.setAttribute("fill","none");
polygon.setAttribute("stroke-width","3px");
svg.a(polygon);
root.a(svg);
}
</script>
</head>
<body οnlοad="createStar()">
<h3>svg dom绘制五角星</h3>
<div id="mystar"></div>
</body>
</html>