将文本路径定位为包含圆形 SVG 的中心

Question

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

这是我的代码笔

法典：

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>