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>