Question

我尝试用按钮创建更多的圆圈，但是不起作用。单击后，它们将显示在Mozilla检查器中。

inspector 但它们对我不可见。我在这里看到过类似的问题，但是没有一个可行的方法。你能帮我吗？ Atm我不知道该怎么办。

circle.js

class Circle {
constructor(id, posx, posy, r, fill) {
    this.id = id;
    this.posx = posx;
    this.posy = posy;
    this.r = r;
    this.fill = fill;
}}

creator.js

function createCircle() {

let color = ["blue", "black", "red", "green", "purple", "orange", "yellow"]
const circle = new Circle("node", 100, 100, 50, color[0]);

var node = document.createElement("CIRCLE");
node.setAttribute("id", "node");
node.setAttribute("cx", circle.posx);
node.setAttribute("cy", circle.posy);
node.setAttribute("r", circle.r);
node.setAttribute("fill", circle.fill);
document.getElementById("frame").appendChild(node);

console.log(circle.fill);}

body和来自index.html

<body onload="myFunction()">
<svg id="sss" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="frame" width="1020px" height="820px" viewBox="0 0 1020 820">
        <circle id="circle0" cx="100" cy="100" r="50" fill="black" />
    </svg>
</svg>
<button onclick="createCircle()">Create circle</button></body>

Answer 1

SVG元素与典型的HTML元素来自不同的命名空间。 HTML文档可以混合来自不同XML方言（例如XHTML）的标签，XHTML是标准HTML元素，但也可以是不同方言，例如SVG名称空间。为了从正确的名称空间创建正确的元素，您需要使用其他JavaScript方法来指定名称空间：

document.createElementNS(namespace, element);

第一个参数是名称空间，因此您应该使用：“ http://www.w3.org/2000/svg”，第二个参数是元素，在这种情况下为“ circle”。因此，尝试：

var node = document.createElementNS("http://www.w3.org/2000/svg", "circle");

如果您更感兴趣，请查看MDN文档：

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Answer 2

@gdanielyan的答案很好。这是一个演示：

class Circle {
constructor(id, posx, posy, r, fill) {
    this.id = id;
    this.posx = posx;
    this.posy = posy;
    this.r = r;
    this.fill = fill;
}}

function createCircle() {

let color = ["blue", "red", "green", "purple", "orange", "yellow"]
const circle = new Circle("node", 100, 100, 50, color[0]);

var node = document.createElementNS("http://www.w3.org/2000/svg","circle");
node.setAttributeNS(null,"id", "node");
node.setAttributeNS(null,"cx", circle.posx + Math.random()*100);
node.setAttributeNS(null,"cy", circle.posy + Math.random()*100);
node.setAttributeNS(null,"r", circle.r);
  let _color=color[~~(Math.random()*(color.length))];
  //console.log(_color)
node.setAttributeNS(null,"fill", _color);
document.getElementById("frame").appendChild(node);
}

<svg id="sss" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="frame" width="1020px" height="820px" viewBox="0 0 1020 820">
        <circle id="circle0" cx="100" cy="100" r="50" fill="black" />
    </svg>
</svg>
<button onclick="createCircle()">Create circle</button>

元素仅在Inspector，SVG中可见

2 个答案: