SVG要素の一部の色を変更する

Question

lineとcircle要素からなるsvg視覚化であるd3.js timeknotsコンポーネントを使用したいと思います。時間の経過とともにsvgの視覚化の色が変わるストップウォッチアニメーションをどのように適用できますか？

オリジナルの視覚化と重なり、時間の経過とともにカラーコピーのクリッピングを変更する、全体の視覚化のカラーコピーを作成できると思います。私はこれが最善のアプローチかどうか、またはそれを行う方法がより良いかどうかはわかりません。

Answer 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>