技術標籤：svgjavascriptcss

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>