SVG Animation: tracer une ligne à partir du centre

Question

J'ai une animation de base que je veux faire avec un SVG. Cependant je ne suis pas sûr à 100% sur comment l'obtenir pour animer du centre. Étant nouveau dans l'animation SVG, je sais comment faire des choses simples, mais je n'ai pas vraiment trouvé de réponse solide à la question que je me posais.

/*MAIN ANIMATION*/ 

.line1, 
.line2 { 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      -o-transform: translate(-50%, -50%); 
       transform: translate(-50%, -50%); 
    -ms-transform: rotate(90deg); /* IE 9 */ 
     -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
      transform: rotate(90deg); 
} 

.line1 { 
    top: 0px; 
    animation: line1 5s linear forwards; /*ANIMATION NAME AND TIMING*/ 
} 

.line2 { 
    bottom: 0px; 
    animation: line2 5s linear forwards; /*ANIMATION NAME AND TIMING*/ 
} 

.animationText { 
    width: 100%; 
    font-size: 30px; 
    font-weight: normal; 
    text-align: center; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      -o-transform: translate(-50%, -50%); 
       transform: translate(-50%, -50%); 
} 

Voici un violon pour ce que les lignes ressemblent à l'heure actuelle: https://jsfiddle.net/7mastya4/6/

Donc en bref je manque ces lignes pour animer du centre vers l'extérieur. Je sais comment faire de l'animation standard, mais comme je suis novice en SVG et que je change de point d'origine, c'est un peu nouveau pour moi.

Merci pour toute aide.

Answer 1

Quelque chose comme ça?

.animline { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 2; 
 
    -webkit-animation: expand-from-centre 5s linear forwards; 
 
    animation: expand-from-centre 5s linear forwards; 
 
} 
 

 
@-webkit-keyframes expand-from-centre 
 
{ 
 
    from { 
 
    stroke-dasharray: 0 300; 
 
    stroke-dashoffset: -150; 
 
    } 
 
    
 
    to { 
 
    stroke-dasharray: 300 300; 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 

 
@keyframes expand-from-centre 
 
{ 
 
    from { 
 
    stroke-dasharray: 0 300; 
 
    stroke-dashoffset: -150; 
 
    } 
 
    
 
    to { 
 
    stroke-dasharray: 300 300; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg> 
 
    <line class="animline" x1="0" y1="75" x2="300" y2="75"/> 
 
</svg>