css - 动画 translateY 在 Firefox 中的剪辑路径上

Question

为什么以下 clipPath 在 Chrome 而不是 Firefox 中有动画？

http://jsfiddle.net/H8S3k/67/

.graph {
  transform: translateY(150px);
  animation: 2s ease-out 0s normal none infinite popup;
}
@keyframes popup {
  0% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(50px);
  }
}

Answer 1

在 SVG 1.1 中，只有某些属性被认为可以使用 CSS 设置样式。这些特定的属性集被称为“属性”。您可以在此处查看指定属性的列表:

https://www.w3.org/TR/SVG/propidx.html

transform 不是其中之一，因此不能使用 CSS 设置样式。

但是在尚未最终确定的 SVG 2 中，所有 SVG 属性都可能会变成可样式化的。 Chrome 已经开始实现这一点，但 Firefox 还没有。这就是为什么您的示例适用于 Chrome 而不是 Firefox。