Estoy tratando de crear mediante programación un polígono SVG con una función agregando a la matriz de polígonos usando svg.js usando el siguiente código:
const draw = SVG().addTo('body').attr({ viewBox: '0 0 100 100' }) const {width,height} = draw.viewbox() const polygon = draw.polygon([]) createPoint(0,0) createPoint(100,0) createPoint(100,100) function createPoint(x,y){ const point = new SVG.Point() point.x = x point.y = y polygon.array().push([point.x,point.y]) }No se muestra nada en el svg. ¿Algunas ideas? Gracias por adelantado
No está empujando los nuevos puntos a la matriz creada anteriormente.
En su lugar, podría establecer una variable de punto que recibirá puntos recién creados
let points = []; createPoint(0,0) createPoint(100,0) createPoint(100,100) const draw = SVG().addTo('body').attr({ viewBox: '0 0 100 100' }) const draw2 = SVG().addTo('body').attr({ viewBox: '0 0 100 100' }) let points = []; createPoint(0,0) createPoint(100,0) createPoint(100,100) let points2 = []; addPoint(0,0); addPoint(100,0); addPoint(100,100); const polygon = draw.polygon(points) const polygon2 = draw2.polygon(points) function createPoint(x,y){ const point = new SVG.Point() point.x = x point.y = y points.push([point.x,point.y]) } function addPoint(x,y){ points2.push([x, y]) } svg{ display:inline-block; width:20% } <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script> Pero no estoy seguro de por qué necesita crear nuevos svgPoints.
Las coordenadas x/y simples también servirían.
Tuve la misma corazonada que @herrstrietzel, quien publicó hace 18 segundos :-). Aquí hay una solución que conserva la mayor parte del código OP inicial ...
const draw = SVG().addTo('body').attr({ viewBox: '0 0 100 100' }) const {width,height} = draw.viewbox() let pts = []; function createPoint(x,y){ const point = new SVG.Point() point.x = x point.y = y pts.push([point.x,point.y]) } createPoint(5,5) createPoint(25,25) createPoint(35,10) const polygon = draw.polygon(pts) <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script> <body/>