对svg中的元素使用animate.css的旋转，不围绕中心点旋转解决方案

最新推荐文章于 2024-03-13 10:04:34 发布

程序员猪猪侠

最新推荐文章于 2024-03-13 10:04:34 发布

阅读量1.6k

点赞数

分类专栏： html svg

本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/108702215

版权

svg 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

近来在用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>

以上代码便可实现矩形绕中心旋转啦