Ist es möglich, Verläufe zu SVG-Pfaden hinzuzufügen?

Question

Ich möchte auf meiner Website einen einfachen Ladeindikator platzieren, der durch ein Skript ausgelöst wird. Es sollte ein einfacher Bogen mit Farbverlauf sein und sich drehen, während der Benutzer wartet. Ich habe den Animationsteil noch nicht ausprobiert, stecke aber jetzt bei statischen Stilen fest. Folgendes habe ich bisher:

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

Es zeichnet den Bogen gegen den Uhrzeigersinn vom oberen Rand zum rechten Rand (270°), aber der Farbverlauf ist falsch. Das endgültige Bild des Bogenstrichs wird im Bildschirmraum von links nach rechts eingefärbt, anstatt dem Pfad zu folgen, sodass der Startpunkt (oberer Rand, 0°) undurchsichtig und der Endpunkt (rechter Rand, 270°) transparent ist.

Wie sorge ich dafür, dass der Farbverlauf meinem Bogenpfad folgt?

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>