Me gustaría crear un SVG de tamaño variable usando JavaScript. Si ejecuta el código, notará el "svgTriangle[0].innerHTML = "<polygon points='";" la línea no se agrega dentro de la etiqueta SVG. Si alguien pudiera ayudarme a averiguar por qué esto no se agrega, se lo agradecería mucho. Gracias.
var svgTriangle = document.getElementsByClassName("svg-triangle"); var bgTrianglePoints; function updateOnResize() { bgTrianglePoints = [ [0, 0], [window.innerWidth * 0.76, 0], [window.innerWidth * .16, window.innerHeight * 1.2], [0, window.innerHeight * 1.2] ]; svgTriangle[0].innerHTML = "<polygon points='"; for (var i = 0; i < bgTrianglePoints.length; i++) { svgTriangle[0].innerHTML += bgTrianglePoints[i][0] + "," + bgTrianglePoints[i][1] + " "; } svgTriangle[0].innerHTML += "'/>"; } window.onresize = function() { updateOnResize(); } updateOnResize(); html, body { margin: 0px; padding: 0px; } #header { width: 100vw; height: 85vh; } .svg-triangle { width: 100%; height: 100%; fill: red; } <div id="header"> <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle"></svg> </div>Para responder a su pregunta, por qué la primera línea no aparece en el HTML, probablemente se deba a que invalida el HTML. En su lugar, podría usar el método document.createElementNS de la siguiente manera:
const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); para crear el elemento polygon en el espacio de nombres SVG.
Luego, puede crear la cadena para el atributo de puntos:
let points = ""; for (var i = 0; i < bgTrianglePoints.length; i++) { points += bgTrianglePoints[i][0] + "," + bgTrianglePoints[i][1] + " "; }y finalmente establezca el atributo en el elemento:
polygon.setAttribute("points", points); Ahora, puede usar svgTriangle.appendChild(polygon) para agregar el polígono al HTML.
Otra posibilidad es usar la propiedad de points en el elemento del polígono, que es una SVGPointList y usar appendItem en un bucle para agregar los puntos, pero eso es mucho código y no es realmente necesario. Además, SVGPoint ya está en desuso...