此问题已在此处有答案:
Can I apply a gradient along an SVG path?(8个回答)
上个月关门了。
我使用svg开发了基于arc的score bar。所以,到目前为止一切看起来都很好,但我想添加梯度颜色的弧。我试着用线性渐变来添加,但形状正在崩溃。这与圆的问题无关。它是基于电弧的。请看附件
图片。
.progress-wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
path {
stroke-linecap: round;
stroke-width: 6;
}
.grey {
stroke: #e5e5e5;
stroke-width: 3px;
}
.green {
stroke: limegreen;
stroke-width: 9px;
stroke-dasharray: 248;
stroke-dashoffset: 240;
/* adjust last number for variance */
&.red-09 {
stroke-dashoffset: 50;
}
}
<div class="progress-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
<path class="grey" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
<path class="green red-09" d="M55,90
A55,55 0 1,1 140,90"
style="fill:none;"/>
</svg>
</div>
1条答案
按热度按时间p8ekf7hl1#
有几种不同的方法可以做到这一点,但对于您的SVG,它可能会使用
linear gradient
(虽然这不是一个完美的解决方案,因为它只是从左到右的线性梯度,并不遵循拱门),但我认为这已经足够了。我不知道你想如何控制
stroke-dashoffset
的长度。但是,也许这将是明智的添加作为一种风格,所以你不需要为每个长度的进度条很多不同的类。这样,它也更容易更新,例如JS,如果这应该反映用户正在做的事情,客户端。希望这能帮到你。祝你今天愉快!