Как узнать точный центр SVG элемента?

Question

[Greg Popov]

Привет. Постал вопрос анимации вращения элемента SVG вокруг своей оси. Потому как Firefox не работает корректно с процентными значениями от transform-origin, требуется узнать точный центр элемента.

К сожалению гугление не дало четкого и правильного ответа на вопрос.

Вот SVG:

<svg version="1.1" id="logotype-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 556.3 146.3" style="enable-background:new 0 0 556.3 146.3;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F77B00;}
	.st1{fill:#FC4D3C;}
	.st2{fill:#F9B521;}
	.st3{fill:#1D3566;}
</style>
<g id="logotype_1_">
	<g id="gears-group">
		<path id="XMLID_40_" class="st0" d="M239.5,86.5l-7.5,1.8c-0.2,0.1-0.4,0.3-0.4,0.5l0.2,3.8c0,0.2,0.2,0.4,0.4,0.5l7.9,1.3
			c0.5,0.1,0.8,0.4,1,0.8c0.4,0.9,0.8,1.8,1.3,2.6c0.3,0.4,0.3,0.9,0,1.4c-1.1,1.7-3.8,6.2-3.8,6.2c-0.3,0.5-0.3,0.8-0.1,0.9
			l2.8,2.6c0.2,0.2,0.4,0.2,0.6,0l6.4-4.7c0.4-0.3,0.9-0.3,1.3-0.1c0.9,0.4,1.8,0.7,2.7,0.9c0.5,0.1,0.9,0.5,1,0.9
			c0.4,1.8,1.5,6.1,1.8,7.4c0.1,0.2,0.3,0.4,0.5,0.4l3.8-0.2c0.2,0,0.4-0.2,0.5-0.4l1.3-7.8c0.1-0.5,0.4-0.8,0.8-1
			c0.9-0.3,1.8-0.7,2.6-1.2c0.4-0.2,0.9-0.3,1.3,0c1.6,1,5.4,3.3,6.6,4c0.2,0.1,0.4,0.1,0.6-0.1l2.6-2.8c0.2-0.2,0.2-0.4,0-0.6
			l-4.7-6.4c-0.3-0.4-0.3-0.8-0.1-1.3c0.4-0.9,0.7-1.8,0.9-2.7c0.1-0.5,0.5-0.9,0.9-1l7.4-1.8c0.2-0.1,0.4-0.3,0.4-0.5l-0.2-3.8
			c0-0.2-0.2-0.4-0.4-0.5l-7.7-1.3c-0.5-0.1-0.8-0.4-1-0.8c-0.3-0.9-0.7-1.8-1.2-2.6c-0.2-0.4-0.3-0.9,0-1.4l4-6.6
			c0.1-0.2,0.1-0.4-0.1-0.6l-2.8-2.6c-0.2-0.2-0.4-0.2-0.6,0l-6.4,4.6c-0.4,0.3-0.9,0.3-1.3,0.1c-0.9-0.4-1.8-0.7-2.8-1
			c-0.5-0.1-0.8-0.5-1-0.9l-1.7-7.1c-0.2-0.6-0.4-0.8-0.6-0.8l-3.8,0.2c-0.2,0-0.4,0.2-0.5,0.4l-1.3,7.9c-0.1,0.5-0.4,0.8-0.8,1
			c-0.9,0.4-1.8,0.8-2.6,1.3c-0.4,0.3-0.9,0.3-1.4,0l-6.5-4c-0.2-0.1-0.4-0.1-0.6,0.1l-2.6,2.8c-0.2,0.2-0.2,0.4,0,0.6l4.6,6.4
			c0.3,0.4,0.3,0.9,0.1,1.3c-0.4,0.9-0.7,1.8-1,2.8C240.3,86,239.9,86.4,239.5,86.5z M249.3,91.6c-1.1-4.9,2.9-9.2,7.8-8.5
			c2.8,0.4,5,2.5,5.7,5.2c1.1,4.9-2.9,9.2-7.8,8.5C252.2,96.4,249.9,94.3,249.3,91.6z"></path>
		<path id="XMLID_37_" class="st1" d="M222.3,71.8l5.7-10.7c0.2-0.4,0.6-0.7,1.1-0.7c1.7,0,3.3-0.3,4.9-0.7c0.5-0.1,1,0,1.3,0.4
			c1.6,1.9,6.3,7.5,7.6,9c0.2,0.2,0.5,0.3,0.8,0.1l5.1-2.8c0.3-0.1,0.4-0.4,0.3-0.7l-3.6-11.6c-0.1-0.4,0-0.9,0.3-1.3
			c1.1-1.2,2.1-2.5,3-4c0.3-0.4,0.7-0.7,1.2-0.6l11.7,1c0.3,0,0.6-0.2,0.6-0.4l1.6-5.6c0.1-0.3,0-0.6-0.3-0.7l-10.7-5.7
			c-0.4-0.2-0.7-0.6-0.7-1.1c0-1.7-0.3-3.3-0.7-4.9c-0.1-0.5,0-1,0.4-1.3l9-7.6c0.2-0.2,0.3-0.5,0.1-0.8l-2.8-5.1
			c-0.1-0.3-0.4-0.4-0.7-0.3L246,19.5c-0.4,0.1-0.9,0-1.3-0.3c-1.2-1.1-2.5-2.1-4-3c-0.4-0.3-0.7-0.7-0.6-1.2l1-11.7
			c0-0.3-0.2-0.6-0.4-0.6L235.2,1c-0.3-0.1-0.6,0-0.7,0.3L228.8,12c-0.2,0.4-0.6,0.7-1.1,0.7c-1.7,0-3.3,0.3-4.9,0.7
			c-0.5,0.1-1,0-1.3-0.4c-1.6-1.9-6.3-7.5-7.6-9c-0.2-0.2-0.5-0.3-0.8-0.1L208,6.6c-0.3,0.1-0.4,0.4-0.3,0.7l3.6,11.6
			c0.1,0.4,0,0.9-0.3,1.3c-1.1,1.2-2.1,2.5-3,4c-0.3,0.4-0.7,0.7-1.2,0.6l-11.7-1c-0.3,0-0.6,0.2-0.6,0.4l-1.6,5.6
			c-0.1,0.3,0,0.6,0.3,0.7l10.7,5.7c0.4,0.2,0.7,0.6,0.7,1.1c0,1.7,0.3,3.3,0.7,4.9c0.1,0.5,0,1-0.4,1.3l-9,7.6
			c-0.2,0.2-0.3,0.5-0.1,0.8l2.8,5.1c0.1,0.3,0.4,0.4,0.7,0.3l11.6-3.6c0.4-0.1,0.9,0,1.3,0.3c1.2,1.1,2.5,2.1,4,3
			c0.4,0.3,0.7,0.7,0.6,1.2l-1,11.7c0,0.3,0.2,0.6,0.4,0.6l5.6,1.6C221.8,72.2,222.1,72,222.3,71.8z M218.5,33.6
			c1.8-6.1,8.7-9.3,14.7-6.2c3.6,1.9,5.8,5.9,5.4,9.9c-0.6,6.7-7,10.8-13.1,9C220,44.7,216.9,39.1,218.5,33.6z"></path>
		<path id="XMLID_32_" class="st2" d="M224.4,137.3l-2.3-9.3c-0.1-0.5,0-0.9,0.4-1.2c0.9-0.9,1.7-1.8,2.4-2.8
			c0.3-0.4,0.8-0.6,1.2-0.5l9.1,1.4c0.2,0,0.5-0.1,0.5-0.3l1.6-4.4c0.1-0.2,0-0.5-0.2-0.6l-8.2-5c-0.4-0.2-0.6-0.7-0.6-1.1
			c0-1.2-0.1-2.4-0.3-3.7c-0.1-0.5,0.1-1,0.5-1.3l7.4-5.5c0.2-0.1,0.3-0.4,0.2-0.6l-2-4.2c-0.1-0.2-0.3-0.3-0.6-0.3l-9.3,2.3
			c-0.5,0.1-0.9,0-1.2-0.4c-0.9-0.9-1.8-1.7-2.8-2.4c-0.4-0.3-0.6-0.8-0.5-1.2l1.4-9.1c0-0.2-0.1-0.5-0.3-0.5l-4.4-1.6
			c-0.2-0.1-0.5,0-0.6,0.2l-5,8.2c-0.2,0.4-0.7,0.6-1.1,0.6c-1.2,0-2.5,0.1-3.7,0.3c-0.5,0.1-1-0.1-1.2-0.5
			c-1.2-1.7-4.6-6.2-5.5-7.4c-0.1-0.2-0.4-0.2-0.6-0.1l-4.2,2c-0.2,0.1-0.3,0.3-0.3,0.6l2.3,9.3c0.1,0.4,0,0.9-0.4,1.2
			c-0.9,0.9-1.7,1.8-2.4,2.8c-0.3,0.4-0.7,0.6-1.2,0.5l-8.7-1.3c-0.7-0.1-0.9,0-1,0.3l-1.6,4.4c-0.1,0.2,0,0.5,0.2,0.6l8.2,5
			c0.4,0.2,0.6,0.7,0.6,1.1c0,1.2,0.1,2.4,0.3,3.7c0.1,0.5-0.1,1-0.5,1.3l-7.4,5.5c-0.2,0.1-0.3,0.4-0.2,0.6l2,4.2
			c0.1,0.2,0.3,0.3,0.6,0.3l9.3-2.3c0.5-0.1,0.9,0,1.2,0.4c0.9,0.9,1.8,1.7,2.8,2.4c0.4,0.3,0.6,0.8,0.5,1.2l-1.4,9.1
			c0,0.2,0.1,0.5,0.3,0.5l4.4,1.6c0.2,0.1,0.5,0,0.6-0.2l5-8.2c0.2-0.4,0.7-0.6,1.1-0.6c1.2,0,2.4-0.1,3.7-0.3
			c0.5-0.1,1,0.1,1.3,0.5c1.2,1.7,4.6,6.2,5.5,7.4c0.1,0.2,0.4,0.2,0.6,0.1l4.2-2C224.3,137.8,224.4,137.5,224.4,137.3z
			 M202.2,117.1c-2.1-4.6,0.3-10.2,5.5-11.5c3.2-0.8,6.6,0.5,8.5,3.1c3.1,4.3,1.5,10.2-3.1,12.3C209,123,204.2,121.2,202.2,117.1z"></path>
	</g>
	<g id="text-group">
		<path id="t" class="st3" d="M15.9,60.7V22.1H1.2v-9.8h40v9.8H26.5v38.5H15.9z"></path>
		<path id="e_1_" class="st3" d="M47.9,60.7V12.3h36.4v9.5H58.4v9.8h22.8v9.5H58.4v10.1h26.2v9.5H47.9z"></path>
		<path id="x" class="st3" d="M90.3,60.7l16.8-24.6L91,12.3h10.8c1,0,2,0.5,2.5,1.4l9.3,14.3l9.3-14.3c0.6-0.8,1.5-1.4,2.5-1.4h10.5
			L119.7,36l16.8,24.7h-10.8c-1,0-2-0.5-2.5-1.4l-9.9-15.2l-10,15.2c-0.6,0.8-1.5,1.4-2.5,1.4H90.3z"></path>
		<path id="h" class="st3" d="M143.2,60.7V12.3h10.6v19.1h19.6V12.3h10.6v48.3h-10.6V41.3h-19.6v19.4H143.2z"></path>
		<path id="c_1_" class="st3" d="M295.8,61.5c-7.1,0-13-2.4-17.7-7.2c-4.7-4.8-7.1-10.7-7.1-17.8c0-7,2.4-12.9,7.1-17.7
			c4.7-4.8,10.8-7.2,18.1-7.2c4.2,0,7.7,0.7,10.6,2c2.9,1.4,5.6,3.3,8.1,5.8l-4.4,5.1c-1,1.2-2.8,1.4-4.1,0.4
			c-1.3-1-2.5-1.7-3.7-2.3c-1.8-0.9-4-1.3-6.6-1.3c-4,0-7.4,1.5-10,4.4c-2.6,2.9-4,6.5-4,10.8c0,4.2,1.3,7.8,4,10.8
			c2.6,2.9,6,4.4,10,4.4c2.6,0,4.8-0.5,6.7-1.4c1.3-0.6,2.6-1.5,3.9-2.5c1.2-1,3-0.8,4,0.3l4.8,5.2c-2.6,2.8-5.5,4.9-8.5,6.2
			C304,60.8,300.3,61.5,295.8,61.5z"></path>
		<path id="e" class="st3" d="M322.5,60.7V12.3H359v9.5h-25.9v9.8h22.8v9.5h-22.8v10.1h26.2v9.5H322.5z"></path>
		<path id="r" class="st3" d="M368.1,60.7V12.3h19.7c5.7,0,10.2,1.5,13.5,4.6c3.3,3.1,5,7.2,5,12.2c0,5.4-1.8,9.6-5.5,12.5
			c-3.7,3-8.4,4.5-14,4.5h-8.1v14.5H368.1z M378.7,36.7h8.4c2.6,0,4.7-0.7,6.2-2.1c1.5-1.4,2.2-3.2,2.2-5.4c0-2.3-0.8-4.2-2.3-5.4
			c-1.5-1.3-3.6-1.9-6.4-1.9h-8.2V36.7z"></path>
		<path id="v" class="st3" d="M412.9,60.7V12.3h22.4c5.6,0,9.8,1.4,12.6,4.3c2.2,2.2,3.3,5,3.3,8.4c0,4.6-2.1,8-6.4,10.4
			c3,1.2,5.2,2.7,6.8,4.5c1.5,1.9,2.3,4.4,2.3,7.5c0,4.3-1.6,7.6-4.8,9.9c-3.2,2.3-7.6,3.4-13.3,3.4H412.9z M423.3,31.9h9.8
			c5.1,0,7.7-1.7,7.7-5.2c0-1.6-0.6-2.8-1.8-3.7c-1.2-0.9-2.9-1.3-5.2-1.3h-10.5V31.9z M423.3,51.3h12.6c5,0,7.5-1.8,7.5-5.4
			c0-3.5-2.6-5.2-7.9-5.2h-12.3V51.3z"></path>
		<path id="i" class="st3" d="M503.6,12.3v48.3h-10.5V29l-20.2,30.3c-0.6,0.8-1.5,1.3-2.5,1.3h-8.4V12.3h10.5V44l20.4-30.4
			c0.6-0.8,1.5-1.3,2.5-1.3H503.6z"></path>
		<path id="c" class="st3" d="M536.5,61.5c-7.1,0-13-2.4-17.7-7.2c-4.7-4.8-7.1-10.7-7.1-17.8c0-7,2.4-12.9,7.1-17.7
			c4.7-4.8,10.8-7.2,18.1-7.2c4.2,0,7.7,0.7,10.6,2c2.9,1.4,5.6,3.3,8.1,5.8l-4.4,5.1c-1,1.2-2.8,1.4-4.1,0.4
			c-1.3-1-2.5-1.7-3.7-2.3c-1.8-0.9-4-1.3-6.6-1.3c-4,0-7.4,1.5-10,4.4c-2.6,2.9-4,6.5-4,10.8c0,4.2,1.3,7.8,4,10.8
			c2.6,2.9,6,4.4,10,4.4c2.6,0,4.8-0.5,6.7-1.4c1.3-0.6,2.6-1.5,3.9-2.5c1.2-1,3-0.8,4,0.3l4.8,5.2c-2.6,2.8-5.5,4.9-8.5,6.2
			C544.7,60.8,541,61.5,536.5,61.5z"></path>
	</g>
</g>
</svg>

Интересуют: #XMLID_32_; #XMLID_37_; #XMLID_40_

Заранее благодарю.

Answer 1

[AlexandrKom]

да есть такой баг в фф, и уже очень давно. Выход юзать фиксированные размеры.

CSS задайте фиксированный размер для вьюпорта и вьюбокса свг, вычислите центры в px для элементов, и если ваша свг должна менять размер на разных экранах изменяйте размеры и значения центров через mediaquares.

Comments

[Greg Popov]

Я задал просто длину и высоту через css, это оно?

[AlexandrKom]

смысл в том что бы задать точку поворота у каждого элемента #XMLID_32_; #XMLID_37_; #XMLID_40_, можно в %. Затем задавайте для #logotype-container нужные вам ширину и высоту.

У фф эта точка будет относительно родителя, а у остальных относительного самого элемента т.е. -50% 50%

codepen.io/AlexanderKom/pen/yJRGAG