SVG動畫：從中心畫一條線

Question

我有一個基本的動畫，我想用SVG做。然而，我不能100％確定如何讓它從中心生成動畫。作爲SVG動畫的新手，我知道如何製作簡單的動畫，但卻無法真正爲我遇到的問題找到確鑿的答案。

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

這裏是該行的樣子，此刻小提琴： https://jsfiddle.net/7mastya4/6/

因此，在短期，我想那些線路從中心向外動畫。 我知道如何做標準動畫，但是對SVG來說是新手，並且改變了他們的動畫原點，這對我來說有點新鮮。

感謝您的任何幫助。

Answer 1

像這樣的東西？

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