1

Se desea dibujar muchas lineas verticales y todas paralelas entre si (como un peine) usando formato gráfico vectorial en lugar de CANVAS para evitar la distorsión al hacer zoom. S trazar multi-lineas pero no son eficientes si lo que quieres es trazar digamos 5000 lineas, ya que debes programar una por una. Por tanto, la idea es programar un código en JavaScript dentro de S V G para trazar las lineas. He buscado desde hace tiempo por internet, con grupos de discusión y tutorials sobre alternativas de dibujo vectorial con S V G y no he podido resolver el problema. En tal sentido, solicito la ayuda de alguno de ustedes, un experto, que me pueda orientar para solucionar esta situación.

1
  • si todas las líneas tienen el mismo aspecto (color, grosor ...etc) puedes utilizar un solo elemento <path> donde el atributo d dibuja las líneas.
    – enxaneta
    Commented el 1 may. 2021 a las 21:59

1 respuesta 1

1

En el ejemplo a continuación dibujo un peine como el que describes solo que con unas pocas líneas, que creo que son suficientes para dar la idea.

Utilizo un solo elemento <path> en el que:

  • Cada comando M mueve la posición a una coordenada específica
  • Cada comando V a dibuja una línea vertical de un alto específico

En cada nueva iteración de la secuencia voy moviendo el inicio de la nueva línea 5 posiciones a la derecha.

<svg width="9cm" height="10cm" viewBox="0 0 400 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
 
 <path d="M10,10 v150 M15,10 v150 M20,10 v150 M25,10 v150 M30,10 v150 M35,10 v150 M40,10 v150 M45,10 v150
          M50,10 v150 M55,10 v150 M60,10 v150 M65,10 v150 M70,10 v150 M75,10 v150 M80,10 v150 M85,10 v150"
        fill="yellow" stroke="blue" stroke-width="2" />
</svg>

Ahora que hemos visto como funciona en puro html, generemos el peine con javascript:

// Find your root SVG element
function crearPeine() {
  let svg = document.querySelector("svg");
  let newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");
  let comandos = "";
  for (let i=0; i<450; i++) {
    comandos += "M" + (i*5) + ",10 V150 ";
  }
  newpath.setAttributeNS(null, "d", comandos);
  newpath.setAttributeNS(null, "fill", "yellow");
  newpath.setAttributeNS(null, "stroke", "blue");
  newpath.setAttributeNS(null, "stroke-width", "2");
  svg.appendChild(newpath);
}
<button onclick="crearPeine()">Haz clic aquí!</button><br />
<svg width="20cm" height="3cm" viewBox="0 0 1000 150">
</svg>

Básicamente lo que hago es:

  • ubicar el elemento <svg>
  • crear un nuevo elemento <path>
  • crear los comandos para crear una cantidad X de líneas verticales, según lo descrito antes
  • agregar al elemento path los comandos y otros atributos para darle formato a las líneas
  • finalmente, agregar el comando path como hijo del svg.
2
  • 1
    Excelente!!! jachguate esto es lo que en realidad estaba buscando. Muy claro el ejemplo y muy funcional para manejar grandes números de líneas (rectas en este caso). Muy agradecido por resolver mi problema.
    – peluca
    Commented el 3 may. 2021 a las 17:38
  • Me alegra ser de ayuda. Considera marcar la respuesta como aceptada, pues esto ayudará en el futuro a quienes lleguen aquí a identificar que la respuesta si fue de ayuda. Recuerda que en StackOverflow puedes saber, de esta manera, si hubo una respuesta útil y cuál es. Es muy útil cuando llegas aquí googlando un proximo problema. Esto no resta mérito a otras respuestas y en ocasiones habrá buenas o hasta mejores respuestas no aceptadas, pero si que ayuda. Si no sabes como aceptar una respuesta, haz el recorrido de bienvenida.
    – jachguate
    Commented el 3 may. 2021 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.