Блог

Главная - Вопросы по программированию - SVG, вращающийся по оси

SVG, вращающийся по оси

#css #svg #css-animations

#css #svg #css-анимация

Вопрос:

Я пытался следить за форумами, чтобы решить проблему, с которой я столкнулся, но мне не повезло. Я пытаюсь вращать эту букву по центральной оси, но вместо этого она перемещается по странице.

Я добавил transform-origin: center center; что, похоже, является ответом, но, похоже, это не влияет на мою анимацию.

Я пропустил здесь очень важную строку кода?

Код

 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="28.2878in" height="8.5in" viewBox="0 0 2036.7197 612"><defs><style>.cls-1{fill:#010101;}</style></defs><title>StableLogo-Wordmark</title>

<!-- BIG S -->
<path class="big-s spin-this" transform="translate(-154 -131)" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z">

	<style>
	
		    .spin-this {
			    -webkit-animation-name: spin;
			    -webkit-animation-duration: 4000ms;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-timing-function: linear;
			    -moz-animation-name: spin;
			    -moz-animation-duration: 4000ms;
			    -moz-animation-iteration-count: infinite;
			    -moz-animation-timing-function: linear;
			    -ms-animation-name: spin;
			    -ms-animation-duration: 4000ms;
			    -ms-animation-iteration-count: infinite;
			    -ms-animation-timing-function: linear;
			    
			    animation-name: spin;
			    animation-duration: 4000ms;
			    animation-iteration-count: infinite;
			    animation-timing-function: linear;

			    transform-origin: center center!important; 
		    }

			@-ms-keyframes spin {
			    from { -ms-transform: rotate(0deg); }
			    to { -ms-transform: rotate(360deg);  }

			}
			@-moz-keyframes spin {
			    from { -moz-transform: rotate(0deg); }
			    to { -moz-transform: rotate(360deg); }
			}
			@-webkit-keyframes spin {
			    from { -webkit-transform: rotate(0deg); }
			    to { -webkit-transform: rotate(360deg); }
			}
			@keyframes spin {
			    from {
			        transform:rotate(0deg);
			    }
			    to {
			        transform:rotate(360deg);
			    }
			}
	</style>


</path>

</svg>

Комментарии:

1. Я не уверен, но я думаю, что проблема может быть в самом вашем SVG, а не в анимации. Вы пытаетесь вращаться вокруг центра S ? Из-за смещения S от центра в SVG, что приведет к анимации, которую вы видите.

2. Добавьте transform-box: fill-box; .spin-this , пожалуйста, прочтите это: MDN — transform-box . Без transform-box: fill-box; буквы вращается вокруг центра элемента svg.

3. Спасибо! Transform-box: fill-box исправил это правильно.

4. Поддержка браузера Bare in mind transform-box ограничена, обязательно проверьте ссылку в комментарии enxaneta. На данный момент он не поддерживается во всех браузерах Microsoft.

5. @DBS, хотя transform-box и имеет ограниченную поддержку браузера, в тех браузерах, в которых нет поддержки, буква будет правильно вращаться вокруг своего центра.