将 SVG 圆圈转换为具有特定点数的路径？

Question

我有两个 SVG，我想在 Anime.Js 之间进行变形，但是它们的点数必须相同。所以我要么需要一种向 SVG 添加点的方法，要么需要一种将圆转换为具有特定点数的路径的方法。

这里是有问题的 SVG：

<svg id="svg1" width="290" height="290" viewBox="0 0 290 290" xmlns="http://www.w3.org/2000/svg">
  <path d="M10,145a135,135 0 1,0 270,0a135,135 0 1,0 -270,0" />
</svg>

<svg width="290" height="290" viewBox="0 0 290 290" xmlns="http://www.w3.org/2000/svg">
  <path d="M280 145C280 225.081 219.558 290 145 290C10 290 10 225.081 10 145C10 64.9187 70.4416 0 145 0C280 0 280 64.9187 280 145Z" />
</svg>

我的假设是，我可以在 Figma 之类的东西中的圆路径线上的任意位置添加点。如果是这样，我需要22分，对吗？

Answer 1

试试这些值：

    var morphing = anime({
  targets: 'path',
  d: [
    { value: 'M 280 145C 280 219.5 205.5 280 145 280C 70.5 280 10 219.5 10 145C 10 70.5 70.5 10 145 10C 219.5 10 280 70.5 280 145Z' },
    { value: 'M 280 145C 280 225.081 219.558 290 145 290C 10 290 10 225.081 10 145C 10 64.9187 70.4416 0 145 0C 280 0 280 64.9187 280 145Z' }
  ],
  easing: 'easeOutQuad',
  duration: 10000,
  loop: true
});

它似乎可以工作，但我不熟悉布局。
我尝试将代码替换为 codepen Anime.js Morphing Paths.
您可以看到两个 svg 数据的最后两点是相同的，这就是我认为应该的方式。并且显然创建了一个带有立方贝塞尔曲线的圆，因为这也接近于被压扁的圆/正方形。我已经按照他们示例中的格式完全格式化了字符串，否则似乎不起作用。

将 SVG 圆圈转换为具有特定点数的路径？

Convert SVG circle to path with specific number of points?

svg

anime.js