I have made a page in which I've made an svg element and draw circles in random positions using javascript. There is a problem that I can't see it, like it doesn't update after a change made with appendChild method, because when I open dev tools, cut the svg element using edit as HTML and then paste it in the same place after script I can see a correctly generated svg. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<script type="text/javascript">
var valuesi = new Int32Array(256);
var values = new Float32Array(valuesi.length);
crypto.getRandomValues(valuesi);
var svg = document.createElement("svg");
svg = document.body.appendChild(svg);
var width = 500,
height = 500;
svg.setAttribute("width", width);
svg.setAttribute("height", height);
var circle, radius = 5;
for (var i = valuesi.length - 1; i > 0; --i) {
values[i] = valuesi[i] / 2147483648;
}
for (var i = values.length - 1; i > 0; --i) {
circle = document.createElement("circle");
circle = svg.appendChild(circle);
circle.setAttribute("cx", width / 2 + values[i] * width / 2);
--i;
circle.setAttribute("cy", height / 2 + values[i] * height / 2);
circle.setAttribute("r", radius);
circle.setAttribute("fill", "black");
}
</script>
</body>
<html>You have to use createElementNS and setAttributeNS for SVGs. Example (https://codepen.io/alekskorovin/pen/dyVbpYa):
var valuesi = new Int32Array(256);
var values = new Float32Array(valuesi.length);
crypto.getRandomValues(valuesi);
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var width = 500,
height = 500;
svg.setAttributeNS(null, "width", width);
svg.setAttributeNS(null, "height", height);
svg.setAttributeNS(null, "fill", "none");
svg.setAttributeNS(null, "viewbox", `0 0 500 500`);
var circle, radius = 5;
for (var i = valuesi.length - 1; i > 0; --i) {
values[i] = valuesi[i] / 2147483648;
}
for (var i = values.length - 1; i > 0; --i) {
circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttributeNS(null, "cx", width / 2 + values[i] * width / 2);
--i;
circle.setAttributeNS(null, "cy", height / 2 + values[i] * height / 2);
circle.setAttributeNS(null, "r", radius);
circle.setAttributeNS(null, "fill", "red");
svg.appendChild(circle);
}
document.body.appendChild(svg);svg path {
color: black;
}
svg {
background: black;
display: block;
width: 100%;
height: 500px;
border: solid 1px red;
}Reference: Creating SVG elements dynamically with javascript inside HTML