Question

我想知道是否可以在下面两行中出现的笔触颜色中进行渐变，并设置为＃389967。这是一个SVG

.chart-three svg .circle-foreground {

  stroke: #389967;
  stroke-dasharray: 494.55px 549.5px;
  stroke-dashoffset: 494.55px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

这里可以找到完整的源代码，它在scss上，但你可以把它编译成CSS：

https://codepen.io/kunalkamble/pen/XXbWwN

我正在寻找更改此图表的前景色，为了获得渐变，你知道这是否可能吗？

我想测量一米能耗，非常接近0％是绿色，当它接近100％是红色

提前致谢

Answer 1

使用存储为中风的SVG图案的图像是可行的，但需要注意的是，您不能再使边缘变圆。从技术角度来说，行程限制会超过元素的开头，因此除非您将其移除，否则渐变的100％值（红色）的条子会突然显示。

https://codepen.io/will0220/pen/xXjKry

<svg role="img" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="fillColors" patternUnits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="http://willmurdoch.com/images/strokeGrad.jpg" width="200" height="200" />
    </pattern>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>
</svg>

然后将其用作前景色。如果您打算使用我所做的相同图片，请将其从上面的链接中保存下来并重新上传到其他地方，因为它已托管在我的个人服务器上。

是否可以制作组成SVG图像的笔划的渐变颜色

1 个答案: