·小希 - 2024-10-3 09:54
·飞飞 - 2024-10-3 09:09
·小白 - 2024-10-3 09:00
·悄然 - 2024-10-3 08:45
·飞飞 - 2024-10-3 08:43
·小白 - 2024-10-2 15:16
·悄然 - 2024-10-2 15:12
·飞飞 - 2024-10-2 14:57
·小希 - 2024-10-1 15:36
让svg内部元素运行CSS动画
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文档。
前一篇: svg子元素绕自身中心点运动的实现方法
下一篇: Humanity
评论列表 [3条]
#3 | 知名不具 于 2024-9-22 09:27 发布: 还是第二种比较简便。
#2 | 小希 于 2024-9-19 21:37 发布: 这两种动画方法，第二种比较容易理解，这种格式贴子里出现的比较多。。
#1 | 飞飞 于 2024-9-19 21:34 发布: http://qhxy.52qingyin.cn/file/20240919210940_16875.svg原来SVG动画是这么来的。。代码完成一系列动作之后，保存为SVG格式。。。
