让svg内部元素运行CSS动画

马黑黑 · 发表于 2024-9-19 18:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-9-19 18:38 编辑

svg有自己一整套动画系统，诸如 set、animate、animateMotion 和 animateTransform 等，都可以在svg中以标签的形式为svg子元素制作动画。遗憾的是svg动画实现过程有点麻烦，不仅动画属性繁多，而且每一个动画标签只能负责一个基于子元素的属性变更（如改变圆心坐标）动画，做一个可能不算复杂的动画也需要多个动画标签来配套完成。CSS动画则简便得多，一切基于元素不同属性的动画都可以放在 @keyframes 选择器中进行表述，然后元素通过 animate 属性引用 @keyframes 选择器的动画名称即可，animation 还可以引用多个 @keyframes 动画并以不同的方式和运行周期运动动画。

先看纯svg的动画例子。下面的示例，矩形元素rect自上而下垂直落下的同时旋转360度：

代码：

查看代码，rect标签内两次使用了 animateTransform 动画标签，一次设置rect的旋转 rotate，另一次设置rect的位移 translate。animateTransform动画多个属性联合使用时需要配置 additive 属性，值为 sum 表示动画叠加 repalce 表示动画替换——即后一个动画替换前一个动画。需要特别注意，旋转动画的 from 和 to 值要设置从{200 20}到{200 220}的rect自己的中心点坐标，不设置或设置不当rect的运动将不是垂直下落；当然，可以给rect加入style属性设置 transform-box 和 transform-origin，像这样，style="transform-box: fill-box; transform-origin: center"，如此from和to属性赋值使用单值即旋转角度就可以了。

前述CSS动画的灵活性其实也可以用于svg，换言之，如果需要，我们完全可以避开svg原生动画标签，转而通过CSS来定制svg内部元素基于@keyframes+animation的动画。现在，我们使用CSS动画实现上例的效果：

代码：

查看代码会发现，CSS写在<svg> ... </svg>标签内，这和做HTML帖子将CSS放在<body> ... </body>标签之内是同一个道理。CSS代码中，.down 选择器 ① 强制转换原点基于自己的中心。这是非常有必要的，因为即使是使用CSS @keyframes动画，svg内的元素依然不会自己改变坐标系；② 设定填充样式 fill、描边样式 stroke 和动画 animation 属性。动画选择器 @keyframes 则设置了一个动画：自上而下移动+旋转360度，二者放在同一个 transform 属性里进行表述，非常简洁。

有意思的是，svg内CSS设定的@keyframes动画，transform的translate平移数值支持百分比，且百分比基于父元素，这和HTML的CSS相同属性动画值不同，后者的百分比基于子元素即引用动画的元素。原因很简单：针对 transform 形变，HTML元素以自我中心点为运动原点，所以translate平移百分比数值基于自身；svg里的元素则以svg画布左上角为形变原点，所以百分比平移数值基于父元素即svg画布。此外，非常重要的，svg标签加上版本号和命名空间属性存为.svg文档之后是合法的，可以当图片使用，像如下代码：

<svg width="400" height="200" viewBox="0 0 400 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<style>
		.down { fill: olive; stroke: none; transform-box: fill-box; transform-origin: center; animation: down 5s linear infinite; }
		@keyframes down { to { transform: translateY(200px) rotate(360deg); } }
	</style>
	<rect x="180" y="0" width="40" height="40" class="down"></rect>
</svg>

svg使用CSS动画除了本文介绍的方法，还可以使用XML的语言规范为svg设置CSS动画，甚至可以和HTML一样使用外部CSS文档。