Question

我的CSS选择器应用于SVG时似乎工作不一致。我正在尝试为SVG设置动画，以使其出现和消失，但该动画仅适用于不透明度，而不适用于字体大小。

<svg stroke="currentColor" fill="currentColor" stroke-width="0" 
viewBox="0 0 448 512" class="flashCue" height="1em" width="1em" 
xmlns="http://www.w3.org/2000/svg" style="left: 10px;"><path d="M257.5 
445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0- 
33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 
34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 
24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg>

.flashCue {
  opacity: 0;
  animation: flash 4s linear;
}
@keyframes flash {
  0%, 100% {
    opacity: 0;
    font-size: 20px;
  }
  50% {
    opacity: 0.7;
    font-size: 40px;
  }
}

对应的JSfiddle here。

问题一定出在选择器上，因为将.flashCue替换为*可以解决问题。

但是，选择器似乎工作不一致，因为我可以使用相同的选择器来应用字体大小而不使用动画：

.flashCue {
    font-size: 100px;
}

为什么选择器在第二个代码段中起作用而在第一个代码段中失效？

Answer 1

不是该类没有被一致引用。 问题在于您要制作动画的东西。

由于SVG中没有任何文本，因此任何font-size设置都将用作1em的高度/宽度的基础。我相信这是在绘制SVG时计算出来的。因此，设置字体大小动画不会导致重新绘制。 opacity对元素是全局的，因此您可以对其进行动画处理。

如果目标是缩放路径（箭头），则应设置高度/宽度的动画或使用transform: scale();两者都对我有用。

@keyframes flash {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(2);
  }
}

为什么用于动画SVG字体大小的此选择器工作不一致？

1 个答案: