SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个<div>和一个SVG <rect>元素：
<!DOCTYPE html>
搜了几篇老外的文章，提到 svg 的 forginObject 内的 HTML 元素，当应用 CSS3 动画时，动画的 transform-origin 是基于最外层 body 定位的，貌似无解。
个人建议使用 svg 的 SMIL 动画来实现波纹特效，你大屏展示用的话，兼容性啥的应该不是主要问题。写了简单示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>svg 动画示例</title>
<style>
html,
body,
svg {
width: 100%
height: 100%
}
body {
padding: 0
margin: 0
background: #232323
}
.eanimation {
stroke: rgb(181, 255, 255)
box-shadow: inset 0px 0px 8px rgba(29, 146, 226, 0.75)
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<circle class="eanimation" cx="200" cy="200" r="96" stroke-width="3" fill="transparent"/>
<animateTransform
attributeName="transform"
type="scale"
dur="1s"
values="0.51"
repeatCount="indefinite"/>
</g>
<g>
<circle class="eanimation" cx="200" cy="200" r="96" stroke-width="3" fill="transparent"/>
<animateTransform
attributeName="transform"
type="scale"
dur="1s"
values="0.651"
additive="sum"
repeatCount="indefinite"/>
</g>
<animate attributeName="opacity" begin="0s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
</g>
</svg>
</body>
</html>
