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

前些天研究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 attributeType="xml" attributeName="transform" type="rotate" valuesv="0 23.8 45;360 23.8 45" dur="3s"  repeatCount="indefinite" />

其中values=“” 的值 0 23.8 45 0是角度 23.8 45 是中心点

===========

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 410.82 98"> <g id="id3"><animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 23.8 45;360 23.8 45" dur="3s"  repeatCount="indefinite" /><path  class="cls-3"  d="M42.13,47.34v-3H40.07c0-.38-.1-.76-.16-1.14l2-.53-.77-2.86-2,.54c-.14-.36-.28-.72-.44-1.06l1.79-1L39,35.73l-1.78,1c-.23-.31-.45-.62-.69-.92L38,34.4,35.9,32.31l-1.44,1.44c-.3-.24-.61-.47-.92-.69l1-1.78L32,29.8l-1,1.78c-.35-.16-.7-.31-1.06-.44l.53-2-2.86-.77-.53,2c-.38-.07-.75-.13-1.14-.17v-2H23v2c-.38,0-.76.1-1.14.16l-.53-2-2.85.77.52,2c-.36.13-.72.28-1.07.44l-1-1.76-2.56,1.48,1,1.75c-.32.23-.63.45-.93.7L13,32.31,10.89,34.4l1.42,1.42c-.25.29-.47.61-.7.92l-1.75-1L8.38,38.29l1.75,1c-.16.35-.31.71-.44,1.07l-1.95-.52L7,42.71l2,.52c-.06.38-.12.76-.16,1.15h-2v3h2c0,.39.1.77.16,1.15L7,49l.77,2.85,1.95-.52c.13.37.28.72.44,1.07l-1.75,1L9.86,56l1.75-1c.23.32.45.63.7.93l-1.42,1.42L13,59.41,14.4,58c.3.25.61.47.93.69l-1,1.76,2.56,1.48,1-1.76c.35.16.71.3,1.07.44l-.52,2,2.85.77.53-2c.38.06.76.12,1.14.16v2h3v-2c.39,0,.76-.1,1.14-.16l.53,2,2.86-.77-.53-2c.36-.14.71-.28,1.06-.44l1,1.78,2.56-1.48-1-1.78c.31-.23.62-.45.92-.7l1.44,1.45L38,57.32l-1.44-1.45c.24-.29.46-.61.69-.92L39,56l1.48-2.56-1.79-1c.16-.35.3-.7.44-1.06l2,.53L41.91,49l-2-.54c.06-.37.13-.75.16-1.13ZM24.44,59.41A13.55,13.55,0,1,1,38,45.86,13.55,13.55,0,0,1,24.44,59.41Z" /></g></svg>

svg 动画 ------- svg的内容如何围绕自身旋转相关推荐

android 载入svg动画,Android 加载SVG动画
Android 加载SVG动画 SVG 可以说是目前比较流行的图片格式,使用领域也十分广泛,例如:web 前端页面,Android ios 等移动应用.都可以使用 SVG 的图片格式.今天就要和大家谈 ...
html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...
SVG 阴影 SVG 渐变 SVG 动画
1 SVG 阴影 1.1 <defs> SVG 允许我们定义以后需要重复使用的图形元素.建议把所有需要再次使用的引用元素定义在 <defs> 元素里面.这样做可以增加 SVG ...
svg动画，渐变，阴影
SVG 与 Canvas 两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言. Canvas 通过 JavaScript 来绘制 2D 图形. svg不会失帧,canvas在js中调用方 ...
SVG动画解释-学习笔记
目录 SVG简介一.SVG是什么? 二.SVG的作用三.SVG与canvas的区别四.如何使用SVG动画五.SVG属性作用 SVG动画的使用 SVG简介 svg是可缩放的矢量图,<svg ...
svg动画制作_制作第一个SVG动画
svg动画制作 Story of a designer trying to code animations instead of asking a dev to figure it out. 一位设计 ...
SVG动画和CSS转换：复杂的爱情故事
以下是GreenSock动画平台(GSAP)的作者Jack Doyle的来宾帖子. Jack长期以来一直深深地沉浸在网络动画的树林中,试图使其变得更轻松,更好. 他之前曾在这里写过文章,谈论JavaS ...
android png图片动画,android图片系列 (4) - SVG动画(动态SVG 图片)
看过之前那篇介绍静态 SVG 矢量图片的童鞋,应该时有感触的,SVG 就是给我们一个空的不限制大小的canvas画板,然后我们使用 path 路径去绘制我们需要的图形,这就是静态的 SVG.动态 S ...
简单的 docker SVG 动画（无聊之作）
最近有点心血来潮,想做一个关于docker的一个中间层,以便更好的实现热部署以及docker容器的周期监控,当然本章不是这个内容,只是因为这个而做的一个小的加载动画. 工具: svgator(现为商业 ...

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

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

svg 动画 ------- svg的内容如何围绕自身旋转相关推荐

最新文章

热门文章