svg 动画 ------- svg的内容如何围绕自身旋转

EIman.

于 2020-12-24 16:15:29 发布

阅读量3.7k

点赞数 1

文章标签： svg javascript css

本文链接：https://blog.csdn.net/elmana/article/details/111636949

版权

本文探讨了如何让SVG元素围绕其自身中心旋转，遇到的问题是初始旋转围绕SVG原点而非元素中心。通过设置`transform-origin: center center;`未能解决问题。最终解决方案是利用`getBBox()`获取元素的宽高和位置，计算出中心点坐标，从而实现正确旋转。

摘要由CSDN通过智能技术生成

前些天研究svg动画
这里就不放图了就一个齿轮要一直旋转
我先直接

   <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 ;360" dur="3s"  repeatCount="indefinite" />

但是得到的是围绕svg的原点旋转（0，0）

后面查了很多发现可以用 transform-origin: center center; 来让他围绕中心点对其

但是又有问题了他围绕的是svg 的中心点不是你需要的当前元素中心，（我改了好久也没办法让他对到想要中心然后发现这个方法行不通）

谷歌搜到一篇类似的问题
可以使用.getBBox()函数获取位置值及宽高
最后可以通过计算计算出中心点

var elem = document.getElementById(“id4”);
var bBox = elem.getBBox();

中心点横坐标 = elem.getBBox().width/2 + x
纵坐标一样算法
在这里插入图片描述

最后得到中心点

就可以

       <animateTransform attributeTyp

关注