描邊效果的SVG漸變

Question

<p>我發現了可能的程式碼</p> <pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34"> <圓cx＝“16” cy＝“16” r＝“15.9155”類別=“進度條__背景” >> <圓cx＝“16” cy＝“16” r＝“15.9155” class =“progress-bar__progress js-progress-bar”/> </svg></pre> <pre class="brush:php;toolbar:false;">$progress-bar-lines-width: 1.8; $進度條大小：300px； svg { 高度：$進度條大小； 變換：旋轉（-90度）； 寬度：$進度條大小； } .progress-bar__background { 填充：無； 中風：#e2eff0； 筆畫寬度：$progress-bar-筆畫寬度； } .progress-bar__progress { 填充：無； 中風：#78bec7； 筆畫破折號數組：100 100； 筆畫-dashoffset：100； 筆劃線帽：圓形； 筆畫寬度：$progress-bar-筆畫寬度； 過渡：行程-dashoffset 1s 緩入緩出； }</pre>

var 完成百分比 = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var ProgressBar = $(".js-progress-bar");
ProgressBar.css(“Stroke-dashOffset”,StrokeDashOffsetValue);</pre>
<p> 但我不知道如何處理svg，有人可以幫我嗎，如何將那個藍綠色替換成替換顏色，像圓錐漸變（紅色，黃色，綠色 - 無意的這種透明顏色）？</ p >

Answer 1

在SVG中，您可以使用<linearGradient>和<radialGradient>#。您正在創建一個進度條，所以根據佈局，徑向漸進可能是創建“錐形漸進”（加引號！）的選項，但是使用起來真的很煩人。

一個很好的替代內建漸變的方法可能是結合SVG和CSS。您可以將CSS樣式套用至嵌入的SVG元素。只要您只需要一個可應用於SVG元素的錐形漸變，然後進行遮罩，以便它只顯示在描邊或其他地方。這是一個範例：

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>