d3.js 使用关键帧动画闪烁，但也保留原始颜色

yc0p9oo0 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(136)

我想在使用d3js创建的饼图的某些扇区上创建一个闪烁效果。通过将下面的css类分配给表示扇区的路径来合并动画。

.blink{
  animation: blinking 1s infinite;
}

@keyframes blinking {
  0% { fill: red; }
  50% { fill: red; }
  51% { fill: white; }
  100% { fill: white; }
}

这会导致扇区闪烁，每秒在红色和白色之间切换。但是，这会覆盖原始颜色。我想保留颜色，并让它在红色和原始颜色之间切换。如何实现这一点？请注意，原始颜色取决于我的图表值，因此我事先不知道它是什么，不能用任何颜色替换白色。

d3.js

来源：https://stackoverflow.com/questions/73705828/use-keyframes-animation-to-blink-but-also-preserve-original-colour

2条答案

按热度按时间

imzjd6km1#

如果您不介意对更改设置动画，则只需将red设置为50%，而无需指定任何其他内容：
第一个
如果希望动画在值之间跳转（与@keyframes中指定的完全相同），则仅当继承了fill（从直接父对象解析为fill的任何对象，使用inherit作为备选颜色：
第一个
但是，这种解决方案有一个缺点。它忽略了直接在元素上设置的任何fill，并将其动画化为直接父元素解析为fill属性的任何内容。换句话说，如果您在元素上将fill设置为blue，而父元素解析为black，则它将在red和black之间交替。完全忽略blue。
在上面的示例中，green被忽略。
不管当前填充是继承的还是自己的，要得到想要的结果，唯一的方法可能就是使用JavaScript。
另一个值得考虑的解决方案是使用color而不是fill，并将fill设置为currentColor。这意味着您的元素应该将color设置为特定的颜色，而不是fill。下面是一个测试：
第一个
正如您所看到的，currentColor既适用于自身的值，也适用于继承的值。currentFill）。还没有。