SVG Animasyon: merkezden bir çizgi çizme

Question

Bir SVG kullanarak yapmak istediğim temel bir animasyonum var. Ancak, merkezden nasıl canlandırılacağı konusunda% 100 emin değilim. SVG animasyonu için yeni olmanın basitlerini nasıl yapacağımı biliyorum, ancak sahip olduğum soruya gerçekten katı bir cevap bulamadı. https://jsfiddle.net/7mastya4/6/

Yani kısacası ben merkezden dışarıya doğru hareketlendirmek için bu satırları isteyen pm: Burada

/*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%); 
} 

hatları şu anda nasıl göründüğünü bir keman olduğunu. Standart animasyonun nasıl yapıldığını biliyorum, ancak SVG'ye yeni olmanın ve animasyon kaynak noktalarını değiştirmenin benim için biraz yeni olduğunu biliyorum.

Yardımlarınız için teşekkür ederiz.

Answer 1

Böyle bir şey mi var?

.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>