es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“Ancla” solo funciona después de cambiar el HTML con la herramienta “Examinar”.

29 May, 2023 Programación

Necesito crear html utilizando javascript y quiero agregar un ancla con un polígono a mi viewBox svg

var createHtml = () => {
  const svg = document.querySelector('svg');
  var svgNS = svg.namespaceURI;

  for (let index = 0; index < 10; index++) {
    var link = document.createElement("a");

    var poly = document.createElement("polygon");
    poly.setAttribute("opacity", 1);
    poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]);
    link.appendChild(poly);

    svg.appendChild(link);
  }

}
createHtml();


<html>

<head>

</head>

<body>
  <figure id="imagemap">
    <svg id="box" viewbox="0 0 1700 1020"></svg>
  </figure>
  <script src="main.js"></script>
</body>

</html>

con esta configuración puedo ver el html en la herramienta de examinación de chrome, pero no aparece en mi viewBox. Sólo si cambio la opacidad con “cambiar como html” aparece.

¿Por qué solo aparece después de cambiar algo CON “cambiar como html”, ya que hacer doble clic no produce ningún cambio? http://jsfiddle.net/n4poxL0a/2/

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¿Cómo puedo agregar un ancla con un polígono a mi viewBox svg usando JavaScript y HTML?

    Puede agregar un ancla con un polígono a su viewBox svg usando el siguiente código:

    var createHtml = () => {
  const svg = document.querySelector('svg');
  var svgNS = svg.namespaceURI;

  for (let index = 0; index < 10; index++) {
    var link = document.createElement("a");

    var poly = document.createElement("polygon");
    poly.setAttribute("opacity", 1);
    poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]);
    link.appendChild(poly);

    svg.appendChild(link);
  }

}
createHtml();

    Asegúrese de incluir el código anterior dentro de una etiqueta <script> en su archivo HTML. Además, deberá agregar un atributo de identificación a su elemento svg y establecer el atributo viewBox en el valor deseado. Aquí hay un ejemplo de archivo HTML:

    <!DOCTYPE html>
<html>
<head>
  <title>Agregar ancla con polígono a viewBox SVG</title>
</head>
<body>
  <figure id="imagemap">
    <svg id="my-svg" viewBox="0 0 500 500">
    </svg>
  </figure>
  <script>
    // Agrega el código JavaScript aquí
  </script>

    De forma predeterminada, el ancla con el polígono tendrá una opacidad de 0, lo que significa que no será visible. Para hacerlo visible, puede cambiar la opacidad en JavaScript o en las herramientas “Inspeccionar elemento” de su navegador. Si cambia la opacidad usando las herramientas “Inspeccionar elemento”, el cambio no se reflejará en su código JavaScript hasta que actualice la página.

Comments are closed.