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小提琴上看到的那样，绿色齿轮应位于svg左上方的灰色齿轮的下方。在from和to上添加值是棘手的部分，因为它会更改原始位置。

请参阅JS小提琴。 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导出的现有变换属性的原点旋转多个圆形路径

1 个答案: