htmlcsssvgpathviewbox

Text on a path, ViewBox crops the letters

I have a rotating text placed on a circle. There's an issues I can't solve:

The copy gets cropped by the viewbox. I tried playing with the viewbox parameters, aiming to "zoom out" but if I change what is currently 141, the shape moves instead of zooming. (see screenshot)

enter image description here

Any thoughts? Thanksin 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>

Solution

  • Seems like the overflow is hidden. One way around this in terms of zoom would be to wrap your view box in a div and then apply a zoom out on that div. Something like:

    .someDiv {
 zoom: 50%;
}

    OR

    .logo svg{
overflow: visible;
}