Question

我想要实现的效果是在圆心中生成文本的类似打字机的效果。我遇到的问题是我不能将文本放在圆圈的中间，除非它是一个普通的changeDetection: ChangeDetectionStrategy.OnPush标签，但我也无法获得打字机效果动画，除非字符串被包装为一个textPath。现在我的文字已被切断并偏离中心。

这是我的codepen

代码：

text

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;
  }
}

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>

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

1 个答案: