Как повернуть несколько круговых путей от точки их происхождения, у которой есть существующий атрибут преобразования, экспортированный из иллюстратора - PullRequest
Новая
       9

Как повернуть несколько круговых путей от точки их происхождения, у которой есть существующий атрибут преобразования, экспортированный из иллюстратора

1 голос
/ 01 апреля 2019

Я пытаюсь оживить ротацию путей из SVG. Я экспортировал файл из иллюстратора как svg и использую код как есть. Однако я не смог добиться центрированного поворота от того места, где пути были изначально помещены в иллюстратор, так как они уже имеют атрибуты преобразования при экспорте. Я думаю, что предопределенный transform translate путей портит анимацию transform rotate. Можем ли мы избежать атрибута transform paths при экспорте 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/

1 Ответ

2 голосов
/ 01 апреля 2019

Я поместил снаряжение в элемент <g> и применил перевод к <g>.

Также я пересчитал центр вращения для вашей анимации from="0 127.42 294.77" to="360 127.42 294.77" как центр ограничительной рамки механизма.

Чтобы получить ограничивающую рамку элемента svg, вы можете использовать метод getBBox() в JavaScript. 

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>

это Javascript, который я использовал после того, как передал снаряжение #gear id: 

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

console.log(x,y)
...