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.

SVG ocultar un objeto hasta que sea necesario

02 Aug, 2023 Programación

Soy capaz de mover un objeto a lo largo de una Curva de Bézier pero tengo dificultades con ‘defs’ y ‘use’. Mi objeto (círculo) aparece en 0,0 antes de que comience la animación, luego aparece en la posición correcta.

<svg viewbox="0 0 500 300" style="border:1px solid black; width:500; height:500;" xmlns="http://www.w3.org/2000/svg">
  <path id="track" d="M100,200 C200,150 300,250 400,200" stroke-width="3" stroke="#000" fill="none"></path>
  <circle id="circ1" r="10" cx="0" cy="0" fill="red">
    <animatemotion begin="1s" dur="6s" fill="freeze">
      <use href="#circ1" cx="100" cy="200"></use>
      <mpath xlink:href="#track"></mpath>
    </animatemotion>
  </circle>
</svg>

¿Cómo puedo hacer que aparezca al comienzo de la línea de Bézier, no en 0,0?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el círculo aparezca al principio de la línea Bezier en lugar de en (0,0), debes usar el atributo xlink:href con el elemento use para hacer referencia al id del elemento circle. Luego puedes usar los atributos x e y para posicionar el elemento use al principio del path.

    Aquí tienes el código actualizado:

    <svg viewbox="0 0 500 300" style="border:1px solid black; width:500; height:500;" xmlns="http://www.w3.org/2000/svg">
  <path id="track" d="M100,200 C200,150 300,250 400,200" stroke-width="3" stroke="#000" fill="none"></path>
  <circle id="circ1" r="10" fill="red"></circle>
  <use xlink:href="#circ1" x="100" y="200">
    <animatemotion begin="1s" dur="6s" fill="freeze">
      <mpath xlink:href="#track"></mpath>
    </animatemotion>
  </use>
</svg>

    En este código, el elemento circle está fuera del elemento use y no tiene los atributos cx o cy. En su lugar, el elemento use hace referencia al circle utilizando el atributo xlink:href y se posiciona en (100,200) utilizando los atributos x e y. El elemento animateMotion anima el elemento use a lo largo del path.

Comments are closed.