Est-il possible d'ajouter des dégradés aux chemins SVG ?

Question

Je souhaite mettre en place un simple indicateur de chargement sur mon site Web, déclenché par un script. Il doit s'agir d'un simple arc avec un dégradé et pivoter pendant que l'utilisateur attend. Je n'ai pas encore essayé la partie animation, mais je suis désormais bloqué sur les styles statiques. Voici ce que j'ai jusqu'à présent :

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

Il dessine l'arc dans le sens inverse des aiguilles d'une montre du bord supérieur au bord droit (270°), mais le dégradé est faux. L'image finale du trait d'arc est colorée de gauche à droite dans l'espace de l'écran, plutôt que de suivre le chemin de telle sorte que le point de départ (bord supérieur, 0°) soit opaque et le point final (bord droit, 270°) soit transparent.

Comment faire en sorte que le dégradé suive le chemin de mon arc ?

Answer 1

Mike Bostock a trouvé un moyen, même si ce n'est pas facile : https://bl.ocks.org/mbostock/4163057

Fondamentalement, cette technique utilise getPointAtLength Pour diviser un trait en plusieurs traits courts, spécifiez des arrêts de couleur d'interpolation pour chaque trait, puis appliquez un dégradé à chaque trait court entre ces arrêts.

Bonne chance si vous êtes prêt à relever le défi ;)

Modifié (3 juillet 2019) :

Il existe désormais une bibliothèque qui peut vous aider à faire exactement ce que vous recherchez. Pas obligatoire pour utiliser D3, mais vous pouvez si vous le souhaitez. Ceci est un tutoriel sur Medium.

Answer 2

Module Images CSS - Niveau 4 présente conic-gradient . Selon MDN, Supporté dans tous les principaux navigateurs sauf IE.

Bien que techniquement il ne s'agisse pas d'une pente le long du chemin, puisque votre chemin est circulaire, vous pouvez obtenir le résultat souhaité en :

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