Creé una página en la que hice un elemento svg y dibujé círculos en posiciones aleatorias usando javascript. Hay un problema que no puedo ver, como que no se actualiza después de un cambio realizado con el método appendChild, porque cuando abro las herramientas de desarrollo, corto el elemento svg usando editar como HTML y luego lo pego en el mismo lugar después script puedo ver un svg generado correctamente. Aquí está el código:
<!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>Debe usar createElementNS y setAttributeNS para SVG. Ejemplo ( 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; }Referencia: Crear elementos SVG dinámicamente con javascript dentro de HTML