SVG-Verlauf mit Stricheffekt
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 {
Höhe: $progress-bar-size;
transformieren: drehen (-90 Grad);
Breite: $progress-bar-size;
}
.progress-bar__background {
füllen: keine;
Strich: #e2eff0;
Strichbreite: $progress-bar-strichbreite;
}
.progress-bar__progress {
füllen: keine;
Strich: #78bec7;
Stroke-Dasharray: 100 100;
Stroke-Dashoffset: 100;
Strichzeilenkappe: rund;
Strichbreite: $progress-bar-strichbreite;
Übergang: Stroke-Dashoffset 1s Easy-In-Out;
}</pre>
<pre class="brush:php;toolbar:false;">var dependenceComplete = 0.6;
var StrokeDashOffsetValue = 100 – (percentageComplete * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("Stroke-Dashoffset", StrokeDashOffsetValue);</pre>
<p>确切的这三种颜色)？</ p>
在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>