SVG绕轴旋转

Question

我试图在论坛上解决我遇到的问题，但是我没有运气。我试图在中心轴上旋转此字母，但它绕着页面旋转。

我添加了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>