Положение текстового пути, чтобы быть центром содержащего круга 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>