SVG Dom绘制矩形

来源：互联网发布：手机淘宝延长收货在哪编辑：程序博客网时间：2024/05/11 17:08

<!DOCTYPEhtml>

<html>

<head>

<title>使用svgdom的形式来创建svg</title>

<style>

#svg-samples{

width: 500px;

height: 500px;

border: 1px solid red;

}

</style>

functioncreateSVG(){

varroot=document.getElementByIdx_x("svg-samples");

varSVG="http://www.w3.org/2000/svg";

//创建svg元素

varsvg=document_createElement_xNS(SVG,"svg");

svg.setAttribute("width","400");

svg.setAttribute("height","200");

//创建我们的rect元素

varrect1=document_createElement_xNS(SVG,"rect");

rect1.setAttribute("x",20);

rect1.setAttribute("y",20);

rect1.setAttribute("width","160");

rect1.setAttribute("height","160");

//指定涂抹的颜色

rect1.setAttribute("fill","skyblue");

//创建第二个rect元素

varrect2=document_createElement_xNS(SVG,"rect");

rect2.setAttribute("x","220");

rect2.setAttribute("y","20");

rect2.setAttribute("width","160");

rect2.setAttribute("height","160");

//指定圆角半径

rect2.setAttribute("ry","40");

//指定涂抹颜色

rect2.setAttribute("fill","skyblue");

svg.a(rect1);

svg.a(rect2);

root.a(svg);

}

</script>

</head>

<bodyonload="createSVG();">

<divid="svg-samples"></div>

</body>

</html>

0 0

SVG&nbsp;Dom绘制矩形

SVG Dom绘制矩形