Question

我每次单击按钮时都尝试使用JavaScript创建<img>标记的新<svg>。当我在控制台firebug中看到结果时，它可以正常工作，但屏幕上没有任何内容显示。我想要的是每次单击按钮时图像<svg>出现在最后一个图像之后。

提前致谢。

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

mybtn.addEventListener("click", createCircleSVG);


    function createCircleSVG(){
      var d = document.createElement('svg');
      d.setAttribute('id','mySVG');

      document.getElementById("svgContainer").appendChild(d); 
      createCircle();
    }    

function createCircle(){

        var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle."
        myCircle.setAttributeNS(null,"id","mycircle" + opCounter++);
        myCircle.setAttributeNS(null,"cx",25);
        myCircle.setAttributeNS(null,"cy",25);
        myCircle.setAttributeNS(null,"r",100);
        myCircle.setAttributeNS(null,"fill","black");
        myCircle.setAttributeNS(null,"stroke","blue");

        document.getElementById("mySVG").appendChild(myCircle);
    }

Answer 1

您需要使用createElementNS在SVG命名空间中创建svg元素（就像您已经为圆圈所做的那样），例如。

var d = document.createElementNS(svgNS, 'svg');

赋予SVG元素宽度和高度也是必要的

    d.setAttribute("width", "100%");
    d.setAttribute("height", "100%");

请注意，我们可以使用setAttribute作为属性在null命名空间中。如果需要，您也可以转换圈子setAttributeNS调用。

Answer 2

创建一个SVG：

$ ssh -i ~/mykey.pem ubuntu@[ec2-ip-address]
$ sudo apt-get update
$ sudo apt-get install build-essential
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash
$ nvm install v0.12.4
$ nvm alias default 0.12.4
$ npm install -g strong-pm

$ sudo sl-pm-install
sudo: sl-pm-install: command not found

$ sl-pm-install
Error adding user strong-pm:
useradd: Permission denied.
useradd: cannot lock /etc/passwd; try again later.
Error installing service 'undefined': Command failed: /usr/sbin/useradd --home /var/lib/strong-pm --shell /bin/false --skel /dev/null --create-home --user-group --system strong-pm
useradd: Permission denied.
useradd: cannot lock /etc/passwd; try again later.

第一个功能：

$ sudo su
# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash
# nvm install v0.12.4
# nvm alias default 0.12.4

第二功能：

# npm install -g strong-pm
> heapdump@0.3.5 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/strong-pm/node_modules/strong-runner/node_modules/strong-supervisor/node_modules/heapdump
> node-gyp rebuild

sh: 1: node-gyp: Permission denied
npm WARN optional dep failed, continuing heapdump@0.3.5

> strong-fork-syslog@1.2.3 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/strong-pm/node_modules/strong-runner/node_modules/strong-supervisor/node_modules/strong-fork-syslog
> node-gyp rebuild

sh: 1: node-gyp: Permission denied
npm WARN optional dep failed, continuing strong-fork-syslog@1.2.3

> strong-agent@1.5.1 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/strong-pm/node_modules/strong-runner/node_modules/strong-supervisor/node_modules/strong-agent
> node-gyp rebuild || exit 0

sh: 1: node-gyp: Permission denied
/
> sqlite3@3.0.8 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/strong-pm/node_modules/strong-mesh-models/node_modules/minkelite/node_modules/sqlite3
> node-pre-gyp install --fallback-to-build

sh: 1: node-pre-gyp: Permission denied
npm ERR! Linux 3.13.0-48-generic
npm ERR! argv "/root/.nvm/versions/node/v0.12.4/bin/node" "/root/.nvm/versions/node/v0.12.4/bin/npm" "install" "-g" "strong-pm"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! sqlite3@3.0.8 install: `node-pre-gyp install --fallback-to-build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the sqlite3@3.0.8 install script 'node-pre-gyp install --fallback-to-build'.
npm ERR! This is most likely a problem with the sqlite3 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-pre-gyp install --fallback-to-build
npm ERR! You can get their info via:
npm ERR!     npm owner ls sqlite3
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/ubuntu/npm-debug.log

或分开：

var svg = document.createElementNS(ns, 'svg');

Example

使用createElementNS创建的元素不显示

2 个答案: