更改部分 SVG 元素的颜色答案

【问题标题】：Changing colour of part of SVG elements更改部分 SVG 元素的颜色
【发布时间】：2018-01-25 16:10:59
【问题描述】：

我想使用 d3.js timeknots 组件，这是一个由 line 和 circle 元素组成的 svg 可视化。我想知道如何应用秒表动画，它会随着时间改变 svg 可视化的颜色。

我想我可以创建整个可视化的彩色副本，它与原始可视化重叠并随着时间的推移更改彩色副本的剪辑。我不确定这是最好的方法还是有更好的方法来做到这一点。

【问题讨论】：

代码在哪里？
@Weedoze 在这里你可以看到可视化jsfiddle.net/uw5x4a5e，但我不想花几个小时编码，也不确定这是否是一个好方法。
将颜色设置为线性渐变并控制色标。
@RobertLongson 非常感谢，我认为这是更好的解决方案。您可以回答问题，我会将其标记为已解决。
如果您提供代码，我会对其进行调整以回答问题。

【解决方案1】：

linearGradient 元素在这个用例中效果很好。

<svg class="timeline" width="809" height="150">
   <defs>
      <linearGradient id="gradient" gradientUnits="userSpaceOnUse" y1="0px" y2="0px" x1="232" x2="233">
         <stop stop-color="#1689fb"></stop>
         <stop stop-color="rgb(126, 126, 126)"></stop>
      </linearGradient>
   </defs>
   <g stroke="url(#gradient)" class="wrapper-timeline">
      <g clip-path="url(#clipLine)" class="wrapper-lines">
         <line class="timeline-line" x1="11" x2="798" y1="75" y2="75" style="stroke-width: 2;"></line>
         <line class="timeline-line" x1="798" x2="798" y1="75" y2="75" style="stroke-width: 2;"></line>
      </g>
      <circle class="timeline-event" id="knot-0" r="6" cy="75" cx="11" style="stroke-width: 2; fill: rgba(220, 220, 220, 0.01);"></circle>
      <circle class="timeline-event" id="knot-1" r="6" cy="75" cx="798" style="stroke-width: 2; fill: rgba(220, 220, 220, 0.01);"></circle>
   </g>
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=""></use>
   <text class="current-time" x="0" y="97" style="font-size: 70%;">00:20:03</text>
   <text class="duration" x="770.859375" y="97" style="font-size: 70%;">01:11:24</text>
</svg>

【讨论】：