我想在使用 d3js 創建的餅圖的某些扇區上創建閃爍效果。通過將以下 css 類分配給表示扇區的路徑來合并影片。
.blink{
animation: blinking 1s infinite;
}
@keyframes blinking {
0% { fill: red; }
50% { fill: red; }
51% { fill: white; }
100% { fill: white; }
}
這會導致扇區閃爍，每秒在紅色和白色之間切換。但是，這會覆寫原始顏色。我想保留顏色并讓它在紅色和原始顏色之間切換。我怎樣才能做到這一點？請注意，原始顏色取決于我的圖表的值，所以我事先不知道它是什么，也不能用任何顏色替換白色。
uj5u.com熱心網友回復：
如果您不介意更改為影片，您只需將其設定red為50%不指定其他任何內容：
顯示代碼片段
.blink {
animation: blinking 1s infinite;
}
@keyframes blinking {
50% { fill: red; }
}<svg height="100" width="300">
<circle cx="50" cy="50" r="40" class="blink" fill="blue"/>
<circle cx="250" cy="50" r="40" class="blink" fill="green"/>
</svg>如果您希望影片在值之間跳轉（完全按照 中指定@keyframes），則只有在fill繼承的情況下才有可能（從直接父級決議為 的任何內容fill，使用inherit作為替代顏色：
顯示代碼片段
.blink {
animation: blinking 1s infinite;
}
@keyframes blinking {
0% { fill: red; }
50% { fill: red; }
51% { fill: inherit; }
100% { fill: inherit; }
}<svg height="100" width="100" fill="blue">
<circle cx="50" cy="50" r="40" class="blink" fill="green" />
</svg>然而，這種解決方案有一個缺點。它忽略fill直接在元素上的任何集合，并影片到直接父級為fill屬性決議的任何內容。換句話說，如果您在元素上設定fill為blue并且父元素決議為black，它將在 和 之間交替red，完全black忽略blue。
在上面的例子green中被忽略了。
無論當前填充是繼承的還是擁有的，可能唯一獲得所需內容的方法就是使用 JavaScript。保存初始值，然后在它和red
值得考慮的替代解決方案是使用color而不是fill設定fill為currentColor. 這意味著您的元素應該color設定為特定顏色，而不是fill. 這是一個測驗：
顯示代碼片段
.blink {
animation: blinking 1s infinite;
}
@keyframes blinking {
0% { fill: red; }
50% { fill: red; }
51% { fill: currentColor; }
100% { fill: currentColor; }
}<svg height="100" width="300" style="color: blue">
<circle cx="50" cy="50" r="40" class="blink" style="color: green" />
<circle cx="250" cy="50" r="40" class="blink" />
</svg>如您所見，它currentColor適用于自己的值和繼承的值。不幸的是，它的對應物沒有實作fill（例如：）currentFill。然而。
uj5u.com熱心網友回復：
您只需在keyframe. 像這樣：
.blink{
animation: blinking 1s infinite;
}
@keyframes blinking {
50% {
fill: red;
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path class="icon blink" d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/508885.html
上一篇：JavaScript：將CSV陣列格式化為Json格式
下一篇：更新D3v7和弦布局