-1
我想使用d3.js timeknots組件,它是由line和circle元素組成的svg可視化組件。我想知道如何應用秒錶動畫,這會隨着時間的推移更改svg可視化的顏色。更改部分SVG元素的顏色
我想我可以創建整個可視化的彩色副本,它與原始可視化重疊並隨時間改變彩色副本的裁剪。我不確定這是最好的方法,還是有更好的方法來做到這一點。
我想使用d3.js timeknots組件,它是由line和circle元素組成的svg可視化組件。我想知道如何應用秒錶動畫,這會隨着時間的推移更改svg可視化的顏色。更改部分SVG元素的顏色
我想我可以創建整個可視化的彩色副本,它與原始可視化重疊並隨時間改變彩色副本的裁剪。我不確定這是最好的方法,還是有更好的方法來做到這一點。
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>
哪裏碼? – Weedoze
@Weedoze在這裏你可以看到https://jsfiddle.net/uw5x4a5e/,但我不想花費幾個小時的編碼,也不確定它是否是一個好方法。 – Matt
將顏色設置爲線性漸變並操縱停靠點。 –