Dégradé SVG avec effet de trait

Question

我发现了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  
  <cercle cx="16" cy="16" r="15,9155" class = "progress-bar__background" />
  
  <cercle cx="16" cy="16" r="15,9155" class="progress-bar__progress js-progress-bar"/>
</svg>

$progress-bar-stroke-width : 1,8 ;
$ taille de la barre de progression : 300 px ;

SVG {
  hauteur : $progress-bar-size ;
  transformation : rotation (-90 deg );
  largeur : $progress-bar-size ;
}

.progress-bar__background {
  remplir : aucun ;
  trait : #e2eff0 ;
  largeur de trait : $progress-bar-stroke-width ;
}

.progress-bar__progress {
  remplir : aucun ;
  trait : #78bec7 ;
  accident vasculaire cérébral-dasharray : 100 100 ;
  décalage de trait : 100 ;
  trait-linecap : rond ;
  largeur de trait : $progress-bar-stroke-width ;
  transition : course-dashoffset 1s facilité d'entrée-sortie ;
}</pré>
<pre class="brush:php;toolbar:false;">var pourcentageComplete = 0,6;
var StrokeDashOffsetValue = 100 - (pourcentageComplete * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("Stroke-dashoffset", StrokeDashOffsetValue);

确切的这三种颜色)？

Answer 1

En SVG, vous pouvez utiliser <linearGradient>和<radialGradient>. Vous créez une barre de progression, donc selon la mise en page, un dégradé radial peut être une option pour créer un "dégradé effilé" (entre guillemets !), mais c'est vraiment ennuyeux à utiliser.

Une bonne alternative aux dégradés intégrés pourrait être de combiner SVG et CSS. Vous pouvez appliquer des styles CSS aux éléments SVG intégrés. Tant que vous voulez juste un dégradé effilé qui peut être appliqué à l'élément SVG, masquez-le pour qu'il n'apparaisse que dans le trait ou quelque chose du genre. Voici un exemple :

svg {
  display: block;
  background-image: conic-gradient(from 180deg, green, orange, red);
}

<svg width="300" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <defs>
    <mask id="m1">
      <rect width="100" height="100" fill="white" />
      <circle transform="rotate(120 50 50)" cx="50"
        cy="50" r="45" stroke="black" stroke-width="5"
        fill="none" stroke-dasharray="300 360" pathLength="360" />
    </mask>
  </defs>
  <rect width="100" height="100" fill="white" mask="url(#m1)" />
</svg>