是否可以从SVG线开始制作一个完美的圆的动画

Question

是否可以制作从SVG线开始的完美圆形的动画，该SVG线将从线的中心变宽并成为一个圆形？

我一直在浏览它，但是它不符合我的期望。因为我使用的关键字有误或其他原因。

我的线路上有这个：

<svg height="210" width="500">
  <line x1="150" y1="150" x2="50" y2="150" style="stroke:rgb(255,0,0); stroke-width:2" />
</svg>

...，我正在寻找的过程将是这样的：

Answer 1

您可以使用纯CSS做到这一点：

.box {
  width:200px;
  height:4px;
  background:radial-gradient(circle,#000 99px,transparent 100px);
    
  animation:toCircle 5s linear 1s forwards;
}
@keyframes toCircle{
  to{
    height:200px;
  }
}


body {
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="box">

</div>

Answer 2

您可以优雅地将SVG椭圆从直线转换为圆形：

svg {
  background-color: #fff;
}

ellipse {
  background:radial-gradient(circle,#000 99px,transparent 100px);
  animation:toCircle 1s linear 1s forwards;
}

@keyframes toCircle{
  to {
    ry:50;
  }
}

<svg width="700" height="500">
	<ellipse cx="100" cy="100" rx="50" ry="0.1"/>
</svg>