SVG 基础API

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

 
 
  • 相关阅读:
    linux解压分卷压缩的zip文件
    centos关闭sudo的ldap认证
    IT词汇表
    IT博客汇
    os.waitpid()无法获取sys.exit()退出时的status code
    github下fork后如何同步源的新更新
    git 撤销commit
    g++编译问题:skipping incompatible /usr/lib//libboost_system.so when searching for -lboost_system
    g++动态库静态库混合链接
    thread
  • 原文地址:https://www.cnblogs.com/liyuspace/p/8443721.html
  • 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