css - 从圆到线的 SVG 动画

Question

我想把一个圆塑造成一条线(路径)。
这可能吗？

可能是我用 Google 搜索的方式有问题。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>

(对我而言)最好的方法是顶部和底部放在一起。
但我更感兴趣的是如何做到这一点!我找不到任何关于如何塑造 svg 元素的信息

---------- 小更新 ----------
刚找到this .它可能会帮助我找到方向。

---------- 小更新 ----------
所以我尝试在没有 JQuery 的情况下执行此操作，但我认为它不会起作用。 这样做的原因是因为我的 JQuery 很烂.... 谁能帮我解决一些 JQuery 问题？

Answer 1

您可以使用 animateTransform 方法进行垂直缩放，将圆转换为直线，并使用 translate-Y 将转换原点保持在圆心

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <g>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10">
    <animateTransform attributeName="transform"
    type="scale"
    from="1 1"
    to="1 0"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </circle>
 <animateTransform attributeName="transform"
    type="translate"
    from="0 0"
    to="0 24"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </g>
</svg>