comment dessiner svg path animation

Question

J'ai 3 blub brillant et 2 lignes pointillées les rejoignant.je dois passer une lueur lumineuse (comme chaque tiret brille un par un) à travers les lignes de l'un à l'autre blush d'une manière répétée Jusqu'à présent, je suis capable d'y parvenir. https://jsfiddle.net/hsfxS/3856/ ..

<div class="mr-glow-1"> 
       <svg width="401" height="332" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
        <line stroke-dasharray="10, 5" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 2px; stroke: rgb(0, 0, 0);"></line> 
       </svg> 
      </div> 

La ligne en pointillé provient en fait d'une image d'arrière-plan. Je dois juste passer une lueur de lumière rose à travers les lignes pointillées montrant que la transition se passe de l'un à l'autre.Comment puis-je y parvenir? Je travaille dans angulaire 4, mais peut faire l'animation par javascript pur.

Answer 1

Vous pouvez utiliser <animate> éléments pour animer un changement de position X et Y

https://codepen.io/danjiro/post/how-to-make-svg-loop-animation

<animate attributeName="cx" from="50" to="250" 
    dur="5s" repeatCount="indefinite" /> 

, vous pouvez faire un cercle lumineux et animer son changement de position x et y avec l'élément animé

Answer 2

Il existe plusieurs façons de faire ce que vous voulez. Tout dépend de la façon dont vous voulez que l'effet regarde et de la fantaisie que vous voulez obtenir.

Par exemple, voici un moyen. Il anime stroke-dashoffset pour déplacer un petit tiret le long d'une deuxième ligne de sorte qu'il semble suivre la première ligne.

<svg width="401" height="332" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <line stroke-dasharray="10, 5" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 2px; stroke: rgb(0, 0, 0);"/> 
 
    <line stroke-dasharray="14, 1000" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 8px; stroke: rgba(192, 64, 64, 0.5);"> 
 
    <animate attributeName="stroke-dashoffset" from="0" to="-848" dur="1s" repeatCount="indefinite" /> 
 
    </line> 
 
</svg>