如何曲线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,0A100,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>

如何曲线svg点组

How to curve svg group of points

javascript

math

svg

curve