Kecerunan SVG dengan kesan strok

Question

我发现了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  
  <bulatan cx="16" cy="16" r="15.9155" class="progress-bar__background" />
  
  <bulatan cx="16" cy="16" r="15.9155" class="progress-bar__progress js-progress-bar"/>
</svg></pra>
<pre class="brush:php;toolbar:false;">$progress-bar-stroke-width: 1.8;
$progress-bar-size: 300px;

svg {
  ketinggian: $progress-bar-size;
  mengubah: berputar (-90deg);
  lebar: $progress-bar-size;
}

.progress-bar__background {
  isi: tiada;
  pukulan: #e2eff0;
  lejang-lebar: $progress-bar-stroke-width;
}

.progress-bar__progress {
  isi: tiada;
  pukulan: #78bec7;
  strok-dasharray: 100 100;
  strok-dashoffset: 100;
  stroke-linecap: bulat;
  lejang-lebar: $progress-bar-stroke-width;
  peralihan: lejang-dashoffset 1s kemudahan-keluar;
}

var percentageComplete = 0.6;
var strokeDashOffsetValue = 100 - (peratusanLengkap * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("stroke-dashoffset", strokeDashOffsetValue);

但是我不知道如何处理svg，有人可以帮我吗，如何将那个蓝绿色替捐列色替换刐我吗，如何将那个蓝绿色替捐刐色替换刐色替换成色替换成色替换成渍确切的这三种颜色)？

Answer 1

Dalam SVG anda boleh menggunakan <linearGradient>和<radialGradient>. Anda sedang mencipta bar kemajuan, jadi bergantung pada reka letak, kecerunan jejari mungkin menjadi pilihan untuk mencipta "kecerunan tirus" (dalam petikan!), tetapi ia benar-benar menjengkelkan untuk digunakan.

Alternatif yang baik kepada kecerunan terbina dalam mungkin adalah menggabungkan SVG dan CSS. Anda boleh menggunakan gaya CSS pada elemen SVG terbenam. Selagi anda hanya mahukan kecerunan tirus yang boleh digunakan pada elemen SVG, kemudian tutupkannya supaya ia hanya muncul dalam lejang atau sesuatu. Berikut adalah contoh:

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>