Estoy creando algunos elementos svg con javascript , por ejemplo
const svg = document.querySelector('svg'); // variable for the namespace const svgns = "http://www.w3.org/2000/svg" //assigning svg element attribute svg.setAttribute('class', 'layer1'); svg.setAttribute('xmlns', svgns); svg.setAttribute('width', '400'); svg.setAttribute('height', '200'); svg.setAttribute('viewBox', '0 0 400 200'); //make background var fill1 = '#e6e6e6'; //var fill2 = 'transparent'; let bg = document.createElementNS(svgns, 'rect'); bg.setAttribute('class', 'bg'); bg.setAttribute('id', 'bg'); bg.setAttribute('width', '200'); bg.setAttribute('height', '200'); bg.setAttribute('fill', fill1); // append the new rectangle to the svg svg.appendChild(bg); function createRect(a) { //create element var rect1 = document.createElementNS(svgns, 'rect'); rect1.setAttribute('class', 'cl' + a); rect1.setAttribute('id', 'id' + a); rect1.setAttribute('x', '10'); rect1.setAttribute('y', '20'); rect1.setAttribute('width', '30'); rect1.setAttribute('height', '30'); //rect1.setAttribute("rx", "20"); rect1.setAttribute('fill', 'red'); svg.appendChild(rect1); }; //create an array from 1 to 5 var bigArray = []; for (var i = 0; i < 5; i++) { bigArray[i] = i + 1; }; //create Rect for each element of the array for (const el of bigArray) { createRect(el); } //create group var group = document.createElementNS(svgns, 'g'); group.setAttribute('class', 'allRect'); group.setAttribute('id', 'allRect'); svg.appendChild(group); var x = document.querySelectorAll('[class^=cl]'); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg> </svg> </body> </html> ¿Cómo puedo pedirle a javascript que inserte un document.querySelectorAll('[class^=cl]') elementos seleccionados personalizados allRect
No estoy seguro de haber entendido la pregunta (traducción aproximada para mí)
¿Es esto lo que estás buscando?
const svgns = 'http://www.w3.org/2000/svg' , fill1 = '#e6e6e6' , svg = document.querySelector('svg') , bg = svg.appendChild( document.createElementNS(svgns, 'rect') ) , setSvgAttr = (el,attrs) => Object.entries(attrs).forEach(([k,v]) => el.setAttribute(k,v)) ; setSvgAttr(svg, { class: 'layer1', xmlns: svgns, width: 400, height: 200, viewBox: '0 0 400 200' }) setSvgAttr(bg, { class: 'bg', id: 'bg', width: 200, height: 200, fill: fill1 }) function createRect(a) { let rectN = svg.appendChild( document.createElementNS(svgns, 'rect')) setSvgAttr(rectN, { class: 'cl'+a, id: 'id'+a, x:a*30, y:a*20, width: 30, height: 30, fill: 'red' }) } //create an array from 1 to 5 var bigArray = Array.from({length:5},(_,i)=>++i); //create Rect for each element of the array for (const el of bigArray) { createRect(el) } //create group var group = svg.appendChild( document.createElementNS(svgns, 'g')) setSvgAttr(bg, { class: 'allRect', id: 'allRect' }) document.querySelectorAll('[class^=cl]').forEach( elSVG => group.appendChild(elSVG)) <svg></svg>