如何在HTML中将SVG圆形动画转为两端圆润的直线而非椭圆？

嘿，这个坑我踩过！直接给圆形做拉伸动画肯定会变成椭圆——毕竟圆形的x、y方向半径是绑定在一起的，缩放比例不一样必然变形。咱们要的是两端带圆角的直线，本质上是个「胶囊形状」，换个元素实现就完美解决啦，给你两种简单方案：

方案一：用圆角矩形（<rect>）实现（最简便） #

<rect>的rx属性可以直接设置圆角半径，初始状态把宽高设成相等（就是个圆形），动画只拉伸宽度、保持高度不变，就能得到你要的效果：

<style>
svg { 
  background: white; 
  border: 1px dotted #3983ab; 
  width: 96%; 
  height: 1000px; 
}
.capsule-animation {
  animation: stretchToLine 2s forwards;
}
@keyframes stretchToLine {
  from {
    width: 40px; /* 初始宽高相等，形成圆形 */
  }
  to {
    width: 400px; /* 拉伸宽度，高度不变 */
  }
}
</style>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
  <g>
    <!-- 初始是圆形（宽高=2*r，rx=r） -->
    <rect x="80" y="80" width="40" height="40" rx="20" class="capsule-animation" fill="#3983ab"/>
  </g>
</svg>

方案二：用路径（<path>）实现（更灵活） #

如果需要更复杂的路径变化，可以用<path>画胶囊形状，动画修改路径指令：

<style>
svg { 
  background: white; 
  border: 1px dotted #3983ab; 
  width: 96%; 
  height: 1000px; 
}
.path-animation {
  animation: pathStretch 2s forwards;
}
@keyframes pathStretch {
  from {
    d: path("M 100 80 A 20 20 0 0 1 100 120 A 20 20 0 0 1 100 80 Z"); /* 圆形路径 */
  }
  to {
    d: path("M 80 100 A 20 20 0 0 1 80 100 L 480 100 A 20 20 0 0 1 480 100 L 80 100 Z"); /* 胶囊路径 */
  }
}
</style>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
  <g>
    <path class="path-animation" fill="#3983ab"/>
  </g>
</svg>

为什么圆形不行？ #

<circle>的r属性控制x、y两个方向的半径，当你尝试拉伸它时（比如修改cx或者用scale变换），两个方向的缩放比例不一致，自然就变成椭圆了——它天生就不适合做这种单向拉伸变胶囊的动画。

内容的提问来源于stack exchange，提问作者Somaxax