SVG动画：从中心绘制一条直线

Question

我有一个基本的动画，想要使用SVG制作。然而，我不确定如何从中心开始进行动画。作为一个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和更改它们的动画起点，这对我来说还是比较新的。

谢谢任何帮助。

- factordog

---

你不能真正用CSS来动画化线条...你需要路径...https://css-tricks.com/svg-line-animation-works/ - Paulie_D

不是 path 元素，而是 line 元素，但也许对于线条也可以奏效。 - Paulie_D

啊，我明白你在看哪里了。我不知道为什么它不能这样做，因为它只是一个轻微的揭示。但我还不太确定。 - factordog

line 元素的 stroke-dashoffset 可以使用 CSS 进行动画处理，但据我所知，您无法通过它获得 由中心向外扩散 的动画效果。不过，您可以尝试像 此示例 中所示的方法。 - Harry

@Harry 谢谢，太完美了。 - factordog

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>

- Paul LeBeau

---

哇，非常聪明。我没想到仅通过动画这两个元素就能获得那种效果。 - Harry