目录
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
JS代码
// 容器
var box = document.getElementById("box");
// 创建svg
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
// svg添加到容器
box.appendChild(svg);
// 创建图形
var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
// 设置矩形属性
rect.setAttribute("x","10");
rect.setAttribute("y","10");
rect.setAttribute("width","300");
rect.setAttribute("height","150");
rect.setAttribute("height","150");
rect.setAttribute("fill","black");
// 添加图形到svg
svg.appendChild(rect);
HTML代码
<div id="box"></div>
svg 的dom命名空间和其他dom元素不一样。创建svg 元素需要用 createElementNS(namespace, ele); namespace 一般为“http://www.w3.org/2000/svg”