I'm stuck with an issue regarding a rotating text on a circle. The problem is that the copy gets cropped by the viewbox. I've tried adjusting the viewbox parameters to "zoom out", but whenever I change the current value of 141, instead of zooming, the shape moves (see screenshot).
https://i.sstatic.net/tcgjx.png
Any suggestions or thoughts on how to resolve this? Thank you in advance!
body {
min-height: 100vh;
width: 100%,
}
.containerSpinText {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
flex: 1;
overflow: hidden;
min-height: 100vh;
font-family: BasisGrotesquePro-Regular;
font-size: 20px;
position: relative;
}
@media (max-width: 600px) {
.containerSpinText {
margin-top: 0;
font-size: 18px;
}
}
.logo {
margin: 0 auto;
min-width: auto;
border-radius: 50%;
height: 26em;
width: 26em;
position: relative;
}
.logo svg {
display: block;
position: relative;
}
.white {
fill: white;
transition: .3s;
}
.logo svg.nav {
cursor: pointer;
position: absolute;
top: 0;
animation: spin 1000s linear infinite;
z-index: 100;
animation-name: spin;
animation-duration: 15000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.logo svg.nav path {
fill: none;
}
@media (max-width: 600px) {
.logo {
margin: 0 auto;
min-width: auto;
border-radius: 50%;
height: 20em;
width: 20em;
position: relative;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<div class="containerSpinText">
<div class="logo">
<svg viewBox="0 0 141 141" class="nav">
<path id="SVGID_x5F_3_x5F_" class="st0" d="M92.3,14.6c30.9,12,46.1,46.8,34.1,77.7c-12,30.9-46.8,46.1-77.7,34.1
c-30.9-12-46.1-46.8-34.1-77.7S61.4,2.6,92.3,14.6z"/>
<text id='testo'><textPath xlink:href="#SVGID_x5F_3_x5F_">
<tspan>Christmas 2020. Have a holly jolly one! :)</tspan></textPath>
</text>
</circle>
</div>
</div>