如何从具有从 illustrator 导出的现有变换属性的原点旋转多个圆形路径

Question

我正在尝试为 svg 中的路径旋转设置动画。我从 illustrator 导出一个文件为 svg 并按原样使用代码。但是，我无法从路径最初放置在 illustrator 中的位置实现居中旋转，因为它们在导出时已经具有变换属性。我认为路径的预定义变换转换会干扰变换旋转动画。我们能否在导出 svg 时避免路径的变换属性，或者有没有一种方法可以在不改变 svg 中路径的原始位置的情况下实现居中旋转动画。

<path class="cls-17 gear" d="M117.256,290.52a11.039,11.039,0,0,1,18.512-2.945,10.924,10.924,0,0,1,1.822,11.471,11.039,11.039,0,0,1-18.51,2.944,10.922,10.922,0,0,1-1.824-11.47Zm-12.748,27.339,8.087,5.869,6.094-8.4a22.288,22.288,0,0,0,7.217,1.723l1.633,10.256,9.868-1.569-1.632-10.257A22.263,22.263,0,0,0,142.1,311.6l8.405,6.1,5.867-8.091-8.4-6.1a22.247,22.247,0,0,0,1.72-7.214l10.257-1.634-1.57-9.868-10.26,1.635a22.092,22.092,0,0,0-3.873-6.325l6.1-8.405-8.09-5.866-6.094,8.4a22.169,22.169,0,0,0-7.216-1.723l-1.631-10.259-9.867,1.572,1.63,10.259a22.181,22.181,0,0,0-6.323,3.874l-8.405-6.1-5.867,8.089,8.405,6.1a22.055,22.055,0,0,0-1.72,7.215L94.9,294.9l1.573,9.866,10.256-1.632a22.171,22.171,0,0,0,3.874,6.323Z"  transform="translate(-55.471 -94.315)">  

<animateTransform attributeType="xml"                            
     attributeName="transform"
 type="rotate"
 from="0 -180 -5" to="360 -180 -5"
 dur="4s"
 repeatCount="indefinite"
 />





</path>
<path class="cls-18" d="M149.377,235.915a8.774,8.774,0,0,1,14.879.77,8.683,8.683,0,0,1-.479,9.219,8.774,8.774,0,0,1-14.877-.77,8.68,8.68,0,0,1,.477-9.219Zm-14.429,19.148,5.317,5.9,6.127-5.525a17.69,17.69,0,0,0,5.325,2.531l-.426,8.244,7.933.411.425-8.244a17.7,17.7,0,0,0,5.556-1.968l5.526,6.128,5.9-5.319-5.523-6.128a17.68,17.68,0,0,0,2.529-5.324l8.244.426.411-7.933-8.247-.424a17.546,17.546,0,0,0-1.966-5.557l6.129-5.527-5.32-5.9-6.126,5.526a17.594,17.594,0,0,0-5.326-2.532l.428-8.246-7.931-.408-.428,8.245a17.641,17.641,0,0,0-5.557,1.967l-5.526-6.129-5.9,5.319,5.526,6.129a17.532,17.532,0,0,0-2.529,5.325l-8.248-.427-.408,7.931,8.244.426a17.609,17.609,0,0,0,1.967,5.556Z" transform="translate(-35.471 -94.315)">

</path>

正如您在 js fiddle 上看到的那样，绿色齿轮应该几乎位于 svg 左上角灰色齿轮的下方。在 from 和 to 上添加值是棘手的部分，因为它会改变原始位置。

参见 JS Fiddle。 https://jsfiddle.net/lmnlis/czg56t7y/4/

Answer 1

我已将齿轮放入 <g> 元素中，并将翻译应用到 <g>。

我还重新计算了动画的旋转中心 from="0 127.42 294.77" to="360 127.42 294.77" 作为齿轮边界框的中心。

要获取 svg 元素的边界框，您可以使用 JavaScript 中的 getBBox() 方法。

svg{width:100vh; border:1px solid;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
 <defs>
 <style>

 .cls-17 {
 fill:#679b48;
 }
 </style>
</defs>

<g transform="translate(-55.471 -94.315)">
<path class="cls-17 gear" d="M117.256,290.52a11.039,11.039,0,0,1,18.512-2.945,10.924,10.924,0,0,1,1.822,11.471,11.039,11.039,0,0,1-18.51,2.944,10.922,10.922,0,0,1-1.824-11.47Zm-12.748,27.339,8.087,5.869,6.094-8.4a22.288,22.288,0,0,0,7.217,1.723l1.633,10.256,9.868-1.569-1.632-10.257A22.263,22.263,0,0,0,142.1,311.6l8.405,6.1,5.867-8.091-8.4-6.1a22.247,22.247,0,0,0,1.72-7.214l10.257-1.634-1.57-9.868-10.26,1.635a22.092,22.092,0,0,0-3.873-6.325l6.1-8.405-8.09-5.866-6.094,8.4a22.169,22.169,0,0,0-7.216-1.723l-1.631-10.259-9.867,1.572,1.63,10.259a22.181,22.181,0,0,0-6.323,3.874l-8.405-6.1-5.867,8.089,8.405,6.1a22.055,22.055,0,0,0-1.72,7.215L94.9,294.9l1.573,9.866,10.256-1.632a22.171,22.171,0,0,0,3.874,6.323Z"  >
<animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 127.42 294.77" to="360 127.42 294.77"
        dur="4s"
        repeatCount="indefinite"/>
  </path>  
  </g>       
</svg>

这是我在给齿轮 #gear id 后使用的 Javascript：

let BB = gear.getBBox();
let x = BB.x + BB.width/2;
let y = BB.y + BB.height/2;

console.log(x,y)

如何从具有从 illustrator 导出的现有变换属性的原点旋转多个圆形路径

How to rotate multiple circular paths from its point of origin that has existing transform attribute exported from illustrator

html

css

svg

adobe-illustrator