html - 将文本路径定位到包含圆 SVG 的中心

Question

我想要实现的效果是在圆心生成文字的打字机效果。我遇到的问题是我无法将文本居中放置在圆圈中间，除非它是一个普通的 text 标签，但我也无法获得打字机效果动画，除非字符串被包装为 textPath。现在我的文字被截断并偏离中心。

这是我的 codepen

代码:

svg {
  width: 100%;
  height: auto;
}

.header-animation--cntr {
  width: 100vw;
  height: 100vh;
}

.circle--cntr {
  width: 50vw;
  max-width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.innerCircle {
  animation-name: incOpacity;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  fill: lavender;
}

.help {
  transform: scale(.006);
  font-family: sans-serif;
  font-size: 3.5em;
}

@keyframes incOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="header-animation--cntr">
  <div class="header-elements--cntr">
    <div class="circle--cntr">
      <svg class="svg--circle" viewBox="-1 -1 2 2">
          <g>
            <circle class="innerCircle" cx="0" cy="0" r="1"></circle>
            <path id="path">
              <animate 
                attributeName="d" 
                from="m0,110 h0" 
                to="m0,110 h1100" 
                dur="3s" 
                begin=".75s"
                fill="freeze"
                repeatCount="1" />
            </path>
            <text class="help" fill="#51c5cf" x="50%" y="50%">  
                   <textPath xlink:href="#path" opacity="0"><tspan x="50%" y="50%" text-anchor="middle">"hello world"</tspan>
                   <animate attributeName="opacity" from="0" to="1" dur="1.5s" begin=".5s" fill="freeze" repeatCount="1"/>
                    </text>
                    </textPath>
                    </g>
                    <animateTransform attributeName="transform" type="scale" from="0" to="1" begin="0s" dur="1.55s" fill="freeze" repeatCount="1" />
        </svg>
    </div>
  </div>
</div>

Answer 1

如果您想向上移动文本，只需减少路径定义中的 Y 坐标即可。例如，更改:

from="m0,110 h0" 
to="m0,110 h1100" 

类似于:

from="m0,20 h0" 
to="m0,20 h1100"

在下面的示例中，我还进行了一些其他调整以修复文本的其他一些问题。

svg {
  width: 100%;
  height: auto;
}

.header-animation--cntr {
  width: 100vw;
  height: 100vh;
}

.circle--cntr {
  width: 50vw;
  max-width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.innerCircle {
  animation-name: incOpacity;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  fill: lavender;
}

.help {
  transform: scale(.006);
  font-family: sans-serif;
  font-size: 3.5em;
}

@keyframes incOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

<div class="header-animation--cntr">
    <div class="header-elements--cntr">

      <div class="circle--cntr">
        <svg class="svg--circle" viewBox="-1 -1 2 2">
          <g>
            <circle class="innerCircle" cx="0" cy="0" r="1"></circle>
            <path id="path">

              <animate 
                attributeName="d" 
                from="m0,20 h0" 
                to="m-150,20 h300" 
                dur="1s" 
                begin=".75s"
                fill="freeze"
                repeatCount="1" />
            </path>

             <!-- x="50%" y="50%" opacity= "0" text-anchor="middle" -->
            <text class="help" 
                  fill="#51c5cf"
                   x="50%" y="50%">
                     
                   <textPath
                     xlink:href="#path"
                     opacity="0"
                     startOffset="50%"
                     text-anchor="middle"
                     >"hello world"
                    
                    <animate 
                      attributeName="opacity" 
                      from="0" to="1" 
                      dur="1.5s" 
                      begin=".5s" 
                      fill="freeze" 
                      repeatCount="1"/>
                    </text>
                    
                    </textPath>  
            </g>
            
       <animateTransform 
            attributeName="transform" 
            type="scale" 
            from="0" 
            to="1" 
            begin="0s" 
            dur="1.55s" 
            fill="freeze"
            repeatCount="1" />
        </svg>
      </div>
    </div>
  </div>