Почему этот селектор для анимации размера шрифта SVG работает непоследовательно?

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 здесь .

Проблема должна быть с селектором, потому что замена .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);
  }
}