CODEWITHSUNDEEP
javascriptsvg
Wojciech Kubiak
Wojciech Kubiak

Reputation: 1

Elements visible only from Inspector, SVG

I've tried to create more circles with button, but it doesnt work. Theyre shown in the Mozilla Inspector after click:

inspector but theyre not visible for me. I've seen similiar problems here, but there wasn't single one that works. Can you help me please? Atm I have no idea what to do.

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 and from 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>

Upvotes: 0

Views: 90

Answers (2)

enxaneta
enxaneta

Reputation: 33024

@gdanielyan's answer is a good answer. Here is a demo:

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>

Upvotes: 0

gdanielyan
gdanielyan

Reputation: 25

SVG elements are from a different namespace than typical HTML elements. An HTML document can mix tags from different XML dialects, for example XHTML, which are the standard HTML elements, but also different dialects as well, like the SVG namespace. In order to create the right element from the correct namespace you need to use a different JavaScript method that lets you specify the namespace: 

document.createElementNS(namespace, element);

The first argument is the namespace so you should use: "http://www.w3.org/2000/svg", and the second is the element, in this case "circle". So try:

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

If you're more interested, check out MDN docs:

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

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

Upvotes: 2

Related Questions