html - 是否可以制作以 SVG 线开头的完美圆的动画

Question

是否可以制作以 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>