目录html
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组dom
SVG 学习<三>渐变svg
SVG 学习<四> 基础APIpost
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令url
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令spa
(转)利用 SVG 和 CSS3 实现有趣的边框动画code
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
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”