css - SVG 动画 : drawing a line from the center

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

这是目前线条的 fiddle : 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>