我想在我的網(wǎng)站上放置一個(gè)由腳本觸發(fā)的簡(jiǎn)單載入指示器。它應(yīng)該是一個(gè)簡(jiǎn)單的圓弧，有漸變並且在使用者等待時(shí)旋轉(zhuǎn)。我還沒(méi)有嘗試過(guò)動(dòng)畫(huà)部分，但現(xiàn)在陷入了靜態(tài)樣式。這是我到目前為止所得到的：
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="red" stop-opacity="0" />
</linearGradient>
</defs>
<path d="M50 10 A40 40 0 1 0 90 50"
stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
</svg>
它從上緣逆時(shí)針到右邊緣（270°）繪製圓弧，但漸變是錯(cuò)誤的。圓弧描邊的最終影像在螢?zāi)豢臻g中從左到右著色，而不是沿著路徑使起點(diǎn)（頂部邊緣，0°）不透明而終點(diǎn)（右邊緣，270°）透明。
如何讓漸層遵循我的弧線路徑？
2
0
0
邁克·博斯托克 (Mike Bostock) 找到了一個(gè)方法，儘管這並不容易： https://bl.ocks.org/mbostock/4163057
基本上，此技術(shù)使用getPointAtLength 要將筆劃分割成許多短筆劃，請(qǐng)為每個(gè)筆劃指定插值顏色停止點(diǎn)，然後對(duì)這些停止點(diǎn)之間的每個(gè)短筆劃應(yīng)用漸層。
如果您能夠應(yīng)付挑戰(zhàn)，祝您好運(yùn)；）
編輯（2019 年 7 月 3 日）：
現(xiàn)在有一個(gè)函式庫(kù)可以幫助您準(zhǔn)確地完成您正在尋找的事情。 不需要使用 D3，但如果您願(yuàn)意，也可以使用。 這是有關(guān) Medium 的教學(xué).
CSS 圖像模組 - 第 4 級(jí)引入了 conic-gradient 。根據(jù) MDN，支援 在除 IE 之外的所有主要瀏覽器中。
儘管從技術(shù)上講，它不是沿著路徑的漸變，但由於您的路徑是圓形，因此可以通過(guò)以下方式實(shí)現(xiàn)所需的結(jié)果：
.loader {
--size: 7.5rem;
--stroke-size: .5rem;
--diff: calc(calc(var(--size)/2) - var(--stroke-size));
background-image: conic-gradient(transparent 25%, red);
width: var(--size);
height: var(--size);
border-radius: 50%;
-webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
animation: rotate 1.2s linear infinite;
margin: 0 auto;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
body {
background: #f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover;
margin: 0;
min-height: 100vh;
padding-top: 2.5rem;
}
* { box-sizing: border-box; }
<div class="loader"></div>
