TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個贊
我通過 js 為你做了關(guān)于 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"/>
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個贊
一種可能的解決方案是將點(diǎn)放在路徑上：
在下一個示例中，我正在繪制一條弧線。在這種情況下，圓弧的半徑是 100。路徑的 d 屬性是：
d="M-80,0A 100,100 0 0 1 80,0"
圓弧上的點(diǎn)是點(diǎn)劃線。為了知道使用的 stroke-dasharray 的值，我使用了 javascript：您的筆觸非常小 (.1)，其后是路徑總長度的 1/5 的間隙。1/5 代表 5 個點(diǎn)。此外，我使用的 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>
為了將點(diǎn)放在一條直線上，我將路徑更改為半徑很大的弧：在這種情況下為 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>
舉報(bào)