近来在用animate.css实现一些svg的效果，使用rotateIn发现并不能围绕着中心旋转。看了网上的一些文章设置translate到中心点，然而非正途啊。有木有简单的方法呢。经过一番折腾，终于被我找到了，就是这个神奇的transform-box样式，而使用transform-box: fill-box可以使svg 元素像个html一样被操作。
<html>
<body>
<svg width="2000" height="2000"
viewPort="0 0 2000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect style="animation-duration: 4s;transform-box:fill-box;" class="animate__animated animate__rotateIn animate__infinite" x="200" y="50" width="100" height="100"/>
</body></html>
以上代码便可实现矩形绕中心旋转啦
