SVG Won't Rotate Correctly

My SVG is rotating from a point on the right of the actual SVG I would like it to rotate from the center of the SVG. I have tried transform-origin: 50% 50%; and that did not work. I have also messed with all of the other settings to no prevail.

Here is my current code:

body {    background-color: black;  }    .rotate {    animation: rotation 8s infinite linear;    opacity: 1;    width: 1400px;    position: absolute;    top: -70px;    right: -195px;  }    .rotate:hover {    opacity: 1;    transition: 0.4s  }    .rotate svg {    transform-origin: center;  }    @keyframes rotation {    from {      transform: rotate(0deg);    }    to {      transform: rotate(360deg);    }  }

<div class="rotate">    <?xml version="1.0" encoding="utf-8"?>    <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 500" style="enable-background:new 0 0 1200 500;">                      <style type="text/css">                          .st0{fill:none;}                      </style>                      <path id="SVGID_x5F_1_x5F_" class="st0" d="M638,358.5c0,40.59-32.91,73.5-73.5,73.5S491,399.09,491,358.5s32.91-73.5,73.5-73.5                          S638,317.91,638,358.5z"/>                      <text><textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">                      <tspan  style="fill:#FFFFFF; font-family:'fatboy-slim'; font-size:40px; letter-spacing: 0px;">Visit Me Visit Me Visit Me</tspan></textPath>                      </text>                      </svg>  </div>

https://stackoverflow.com/questions/66451054/svg-wont-rotate-correctly March 03, 2021 at 01:01PM