是否可以制作构成 SVG 图像的笔画的渐变颜色答案

【问题标题】：Is it possible to make a gradient color of a stroke that composes a SVG image是否可以制作构成 SVG 图像的笔画的渐变颜色
【发布时间】：2018-03-20 23:22:39
【问题描述】：

我想知道是否可以在下面两行中出现的笔触颜色中进行渐变，并设置为#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% 时为红色

提前致谢

【问题讨论】：

您的 codepen 出现故障并卡在重新加载循环中 - 不确定该站点是否只是有问题或您的代码中有问题！
我已经更新了链接，请你再试一次

标签： css svg sass

【解决方案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>

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

【讨论】：