是否可以為 SVG 路徑新增漸層？

Question

我想在我的網站上放置一個由腳本觸發的簡單載入指示器。它應該是一個簡單的圓弧，有漸變並且在使用者等待時旋轉。我還沒有嘗試過動畫部分，但現在陷入了靜態樣式。這是我到目前為止所得到的：

#

<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>

#

它從上緣逆時針到右邊緣（270°）繪製圓弧，但漸變是錯誤的。圓弧描邊的最終影像在螢幕空間中從左到右著色，而不是沿著路徑使起點（頂部邊緣，0°）不透明而終點（右邊緣，270°）透明。

如何讓漸層遵循我的弧線路徑？

Answer 1

邁克·博斯托克 (Mike Bostock) 找到了一個方法，儘管這並不容易： https://bl.ocks.org/mbostock/4163057

基本上，此技術使用getPointAtLength 要將筆劃分割成許多短筆劃，請為每個筆劃指定插值顏色停止點，然後對這些停止點之間的每個短筆劃應用漸層。

如果您能夠應付挑戰，祝您好運；）

編輯（2019 年 7 月 3 日）：

現在有一個函式庫可以幫助您準確地完成您正在尋找的事情。 不需要使用 D3，但如果您願意，也可以使用。 這是有關 Medium 的教學.

Answer 2

CSS 圖像模組 - 第 4 級引入了 conic-gradient 。根據 MDN，支援 在除 IE 之外的所有主要瀏覽器中。

儘管從技術上講，它不是沿著路徑的漸變，但由於您的路徑是圓形，因此可以通過以下方式實現所需的結果：

.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>