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...