<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>svgdom实现g元素</title>
<style>
#myg{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script>
function createEleG(){
var root=document.getElementByIdx_x("myg");
var SVG="http://www.w3.org/2000/svg";
//创建我们的svg元素
var svg=document_createElement_xNS(SVG,"svg");
svg.setAttribute("width","200");
svg.setAttribute("height","200");
//创建我们的g元素
var g=document_createElement_xNS(SVG,"g");
g.setAttribute("fill","dodgerblue");
for(var i=0;i<3;i++){
var rect=document_createElement_xNS(SVG,"rect");
rect.setAttribute("width","40");
rect.setAttribute("height","40");
rect.setAttribute("ry","10");
rect.setAttribute("x",10+50*i);
rect.setAttribute("y",10+50*i);
g.a(rect);
}
svg.a(g);
root.a(svg);
}
</script>
</head>
<body onload="createEleG()">
<h3>svgdom实现g元素</h3>
<div id="myg"></div>
</body>
</html>