SVG 变换动画在 Chrome 中不起作用答案

【问题标题】：SVG transform animation not working in ChromeSVG 变换动画在 Chrome 中不起作用
【发布时间】：2014-07-22 00:12:44
【问题描述】：

我正在尝试使用 CSS 转换为 SVG 文本元素设置动画。在 Firefox 中一切正常，但 Chrome 只显示文本应用了第一个关键帧规则。

我尝试使用 -webkit 前缀，但仍然没有成功。

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
      width="400px" height="400px" viewBox="0 0 400 400" >

    <text class="text-need" fill="#FFFFFF" font-size="136">Need</text>
</svg>

CSS

.text-need {
     font-family: sans-serif;
     animation: slideRight 1s ease-in-out forwards;
}

@keyframes slideRight {
    0% {
        transform: translate(0rem, 9rem);
    }
    100% {
        transform: translate(25rem, 9rem);
    }
}

Codepen

这有点奇怪，因为在 Chrome 中为 clipPath 设置动画效果很好，但在 Firefox 中却不行。

Codepen

【问题讨论】：

标签： css google-chrome svg

【解决方案1】：

您的问题可能是由于缺少 -webkit-prefix 引起的吗？

http://www.w3schools.com/css/css3_animations.asp

我不知道为什么您的第二个示例无法在 Firefox 上运行，但我想这更多是浏览器兼容性问题...

【讨论】：

codepen 使用无前缀，因此前缀不应该引起问题。此外，如果我在 h1 上应用相同的动画，它也可以工作。