SVG gradient with stroke effect
P粉193307465
2023-08-29 09:30:52
<p>我发现了这段代码</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，有人可以帮我吗，如何将那个蓝绿色替换成渐变色，像conic-gradient(red, yellow, green - 确切的这三种颜色)？</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>