亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

SVG gradient with stroke effect
P粉193307465
P粉193307465 2023-08-29 09:30:52
0
1
676
<p>我發(fā)現(xiàn)了這段代碼</p> <pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34"> <circle cx="16" cy="16" r="15.9155" class="progress-bar__background" /> <circle cx="16" cy="16" r="15.9155" class="progress-bar__progress js-progress-bar"/> </svg></pre> <pre class="brush:php;toolbar:false;">$progress-bar-stroke-width: 1.8; $progress-bar-size: 300px; svg { height: $progress-bar-size; transform: rotate(-90deg); width: $progress-bar-size; } .progress-bar__background { fill: none; stroke: #e2eff0; stroke-width: $progress-bar-stroke-width; } .progress-bar__progress { fill: none; stroke: #78bec7; stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-linecap: round; stroke-width: $progress-bar-stroke-width; transition: stroke-dashoffset 1s ease-in-out; }</pre> <pre class="brush:php;toolbar:false;">var percentageComplete = 0.6; var strokeDashOffsetValue = 100 - (percentageComplete * 100); var progressBar = $(".js-progress-bar"); progressBar.css("stroke-dashoffset", strokeDashOffsetValue);</pre> <p>但是我不知道如何處理svg,有人可以幫我嗎,如何將那個(gè)藍(lán)綠色替換成漸變色,像conic-gradient(red, yellow, green - 確切的這三種顏色)?</p>
P粉193307465
P粉193307465

reply all(1)
P粉908643611

In SVG, you can use <linearGradient> and <radialGradient>. You're creating a progress bar, so depending on the layout, a radial gradient might be an option to create a "tapered gradient" (in quotes!), but it's really annoying to use.

A good alternative to built-in gradients might be to combine SVG and CSS. You can apply CSS styles to embedded SVG elements. As long as you just want a tapered gradient that can be applied to the SVG element, then mask it so it only shows up in the stroke or something. Here is an example:

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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template