在Firefox中的clipPath上设置translateY的动画

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。