如何弯曲svg点组

Question

所以我正在创建 svg 圆圈组，需要根据用户输入来弯曲它们。但我无法计算正确的位置。用户可以弯曲 3..n 个圆圈（我拥有每个圆圈的所有位置）。图片中的示例https://i.stack.imgur.com/1YiV2.png知道如何计算曲线并将圆移动到正确的位置吗？

Answer 1

我通过 js 为你做了关于 HTML 的曲线的事情。它可能不是最有效的，但这里是代码：

var imgs = document.querySelectorAll("img");

let intensity = 24;

let reduction = intensity / (imgs.length-1);

for (let i = 0; i < imgs.length; i++) {

  imgs[i].style.left = i * 32 + "px"; // Use this for horizontal gap

  imgs[i].style.top = ((intensity) * (i)) + "px";

  intensity -= reduction;

}

img {

  width: 32px;

  height: 32px;

  position: absolute;

}

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

Answer 2

一种可能的解决方案是将点放在路径上：

在下一个示例中，我正在绘制一条弧线。在这种情况下，圆弧的半径是 100。路径的 d 属性是：

d="M-80,0A 100,100 0 0 1 80,0"

圆弧上的点是点划线。为了知道使用的 stroke-dasharray 的值，我使用了 javascript：您的笔触非常小 (.1)，其后是路径总长度的 1/5 的间隙。1/5 代表 5 个点。此外，我使用的 stroke-dashoffset 是路径总长度的 1/10，即用于 stroke-dasharray 的间隙的一半

let length = thePath.getTotalLength()

thePath.setAttribute("stroke-dasharray", `.1,${length/5}`)

thePath.setAttribute("stroke-dashoffset", length/10)

svg{border:solid; }

<svg width="200" viewBox="-100 -100 200 200">

<path id="thePath" d="M-80,0A100,100 0 0 1 80,0" fill="none" stroke="black" stroke-linecap="round" stroke-width="30"/>    

</svg>

为了将点放在一条直线上，我将路径更改为半径很大的弧：在这种情况下为 1000

d="M-80,0A1000,1000 0 0 1 80,0"

let length = thePath.getTotalLength()

thePath.setAttribute("stroke-dasharray", `.1,${length/5}`)

thePath.setAttribute("stroke-dashoffset", length/10)

svg{border:solid; }

<svg width="200" viewBox="-100 -100 200 200">

<path id="thePath" d="M-80,0A1000,1000 0 0 1 80,0" fill="none" stroke="black" stroke-linecap="round" stroke-width="30"/>    

</svg>