SVG动画和CSS转换：复杂的爱情故事

以下是GreenSock动画平台（GSAP）的作者Jack Doyle的来宾帖子。 Jack长期以来一直深深地沉浸在网络动画的树林中，试图使其变得更轻松，更好。 他之前曾在这里写过文章，谈论JavaScript动画如何成为最高效的选择（Google甚至推荐它）。 这次，他专注于SVG动画，使用CSS处理它们时可能遇到的一些非常可怕的问题，以及如何解决这些问题。

如今，SVG非常流行，浏览器支持通常非常出色……一个明显的例外：CSS转换。对于动画而言，这尤其痛苦，因为缩放，位置，旋转和倾斜非常重要。

系好安全带，因为我们要颠簸。但是不用担心；这个复杂的爱情故事有一个幸福的结局。在本文中，我将向您介绍一些问题，然后向您展示一种协调各种浏览器行为的技术，并将其引入到最新版本的GreenSock动画平台（ GSAP ）中。

浏览器错误和不一致

首先，查看这些动画GIF，它们在各种浏览器中显示两个<rect>元素的CSS动画完全相同（至少从2014年11月开始）：

请参阅CodePen上的GreenSock （ @GreenSock ）提供的笔GIFS：SVG + CSS转换问题。

IE和Opera根本不支持SVG元素上CSS转换。而是必须将值分配给transform 属性。
Firefox不支持基于％的来源。
放大Safari会破坏基于％和基于px的原点之间的同步。
Firefox无法识别基于关键字的来源（如"right bottom" ，而当缩放比例达100％时， Safari会对其进行更改。
在所有浏览器中 ，对SVG元素和其他DOM元素而言，基于px的原点的测量方式有所不同（请参见下文）。

这是一个演示这些错误的视频：

将transform-origin视为所有旋转和缩放发生的点，就好像是一个销子将其固定在此处一样，

我的转换来源在哪里？

通常，如果要从元素的中心旋转或缩放，则可以设置transform-origin: 50% 50% 。百分比是相对于元素本身的原始大小的，因此其宽度的50％和高度的50％会在中间出现smack-dab。所有主要的浏览器都支持常规DOM元素的基于％的来源，但只有少数浏览器支持SVG元素。

基于px的值如何？支持非常好，但是还有另一个问题：如下所示，SVG相对于父 SVG的0,0坐标测量基于px的值，而其他所有DOM元素（如<div> ）则相对于其自身的左上角对其进行测量。因此，如果要居中，则必须进行数学运算以在SVG中绘制坐标（ getBBox()可以使用getBBox() JS）。因此，您不能将相同CSS应用于常规DOM元素和SVG元素，并期望它们的行为相同。

请参阅CodePen上的GreenSock （ @GreenSock ）的Pen SVG变换源演示。

一个办法

如果我有一个可以在这里使用的纯CSS技巧，那会很好，但是由于IE和Opera完全忽略了SVG元素上CSS转换，并且大多数其他浏览器中都有错误，因此我们将依靠一种令人难以置信的优势JavaScript：其灵活性。即使下周每个浏览器都修复了它们的错误，我们仍然无法避免以下事实：SVG规范与其他DOM元素处理基于px的变换起源非常不同，因此CSS变换绑定到该规范。据我所知，唯一可行的长期解决方案是基于JS的解决方案。另外，JS还给我们带来了许多其他好处，但这是另一篇文章的主题。

目标：能够以与“正常” DOM元素相同的方式为SVG元素设置各种变换属性（旋转，缩放，位置和倾斜），同时在所有主要浏览器中提供相同的行为。我们还应该能够使用类似于CSS的标准值（包括百分比，px或诸如"right bottom"类的关键字）来设置转换原点。哦，一定是FAST 。

如果您还不熟悉GreenSock的GSAP ，那么它是一个高性能，专业级JavaScript动画库，具有无与伦比的排序工具，运行时控件和灵活性（几乎可以动画化JavaScript可以触摸的任何东西）。 Google推荐将其用于基于JS的动画，它的速度比jQuery快20倍。

这是GSAP幕后采用的技术的概述（由于它不在本文的讨论范围之内，因此我们将不涉及矩阵数学）。下面的演示通过将转换原点指定为"50% 50%"来说明当您尝试围绕其中心旋转SVG <rect>时GSAP的操作。

请参阅CodePen上的GreenSock （ @GreenSock ）提供的Pen SVG变换源解决方案。

生成的matrix（）字符串应被馈送到元素CSS样式或transform属性，无论该特定浏览器是否必需。

如果那对您没有意义，那没关系–这一切在GSAP的幕后自动为您完成。

结果

我们不仅可以在浏览器中获得统一的行为，而且可以为SVG和非SVG元素使用一致的动画API，而且与（破碎的）纯CSS动画相比，我们必须编写的动画代码很小。

TweenMax.to("#svg, #div", 2, {rotation:360, transformOrigin:"50% 50%"
});

这是一个演示了几个起源的序列的演示。请注意，对于SVG <rect>和<div> ：

请参阅CodePen上的GreenSock （ @GreenSock ）提供的Pen SVG CSS转换时间轴。

使用GSAP动画SVG的技巧

我不会在这里解释GSAP的API（请参阅入门文章），但是我将提供一些与SVG相关的技巧。在github上获取 GSAP 快照，或从GreenSock.com下载。

GSAP无需像CSS中那样将所有转换组件组合成单个“转换”字符串，而是使您可以独立定义每个转换组件，并且无需担心操作顺序（它始终是一致的）。也请记住，GSAP使用x和y指translateX()和translateY()并且rotation的rotate() 其他所有内容都相同（ scaleX ， scaleY ， skewX和skewY ）。
```
#yourID {animation-name: myAnimation;animation-duration: 2s;animation-timing-function: ease-out;transform-origin: right bottom;
}
@keyframes myAnimation {from {transform: none;}to {transform: rotate(270deg) scaleX(0.5) translateX(100px);}
}
```
```
TweenMax.to("#yourID", 2, {rotation:270, scaleX:0.5, x:100, transformOrigin:"right bottom"
});
```
您可以传入原始元素作为目标（第一个参数），选择器文本或元素数组。
要设置SVG的数字属性（而不是CSS属性）的动画，请使用attr:{}对象，例如：
```
TweenMax.to("#circle", 2, {attr:{cx:200, cy:300, r:20}, ease:Power2.easeInOut});
```
您还可以使用z ， rotationX ， rotationY和perspective等3D属性，但某些浏览器（如IE和Opera）无法识别SVG元素的属性。
最好直接通过GSAP而不是CSS来设置transformOrigin ，因为各种浏览器都会通过getComputedStyle()不一致地报告它们。
您几乎可以为所有CSS值设置动画，包括fill和stroke等颜色属性。
如果您想进行很多排序，强烈建议您在此处和此处观看视频。测序是GSAP最重要的优势之一。