如何弯曲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++) {&nbsp; imgs[i].style.left = i * 32 + "px"; // Use this for horizontal gap&nbsp; imgs[i].style.top = ((intensity) * (i)) + "px";&nbsp; intensity -= reduction;}img {&nbsp; width: 32px;&nbsp; height: 32px;&nbsp; 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"/>&nbsp; &nbsp;&nbsp;</svg>为了将点放在一条直线上，我将路径更改为半径很大的弧：在这种情况下为 1000d="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"/>&nbsp; &nbsp;&nbsp;</svg>