路径上的文本，ViewBox 裁剪字母

Question

我在一个圆圈上放置了一个旋转的文本。有一个问题我无法解决：

副本被视图框裁剪。我尝试使用 viewbox 参数，旨在“缩小”，但如果我更改当前的 141，形状会移动而不是缩放。（见截图）

有什么想法吗？提前致谢！

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>

Answer 1

似乎隐藏了溢出。就缩放而言，解决此问题的一种方法是将视图框包裹在 div 中，然后在 div 上应用缩小。类似于：

.someDiv {
 zoom: 50%;
}

或

.logo svg{
overflow: visible;
}

路径上的文本，ViewBox 裁剪字母

Text on a path, ViewBox crops the letters

html

css

svg

path

viewbox