Appended element is visible in document but not visible visually

[kazik56]

Hello!

I created an svg element and appended it to my website. Despite the fact that it’s being added (it’s visible in svg tag after inspecting website) it doesn’t appear visually on website. Why it isn’t displayed?

HTML

<svg id='timer' viewBox="0 0 300 300">
    <circle cx="150" cy="150" r="100" />
</svg>

JS

const svg = document.querySelector('#timer');

const radius = 100;
const wh = 300;

// Creating circle and appending it
const circle = document.createElement('circle');

circle.setAttribute('cx', `${wh / 2}`);
circle.setAttribute("cy", `${wh / 2}`);
circle.setAttribute("r", `${radius / 2}`);
circle.setAttribute("fill", "pink");

svg.appendChild(circle);

Here is the jsfiddle with the code: https://jsfiddle.net/fk4a68wm/3/
EDIT: Updated jsfiddle link

[metasean]

After mucho searching and modifications, it looks like you simply need to declare your circle differently because it’s an SVG element.

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

instead of

const circle = document.createElement('circle');

• working version
• a few of the many Stack Overflow questions along the same line:
  • https://stackoverflow.com/questions/16488884/add-svg-element-to-existing-svg-using-dom
  • https://stackoverflow.com/questions/20539196/creating-svg-elements-dynamically-with-javascript-inside-html (with a different working example - http://jsbin.com/Udeyaje/2/edit?html,js,output )
  • https://stackoverflow.com/questions/32637811/how-can-i-add-a-svg-graphic-dynamically-using-javascript-or-jquery

[kazik56]

Thank you very much! I was searching for that with less accurate keywords and couldn’t find answer to this problem.

[metasean]

As I get more experienced as an actual developer, I find myself spending more and more time having to troubleshoot in areas I don’t know about, so I’ve definitely built up some skills (and persistence) in this realm.

I wish there were better ways to do troubleshooting and to teach the related skills. Alas, right now it just seems to come with lots of (frequently painful) experience Of course, asking questions, with examples of the code is one of the best ways for folks who are just getting started!

Best wishes!