изменение элементов с помощью SVG

Question

Я пытаюсь контролировать и манипулировать элементом внутри svg.

По сути, я хочу, чтобы текст go от маленького до большого в середине экрана. Это работает, если я использую класс div, но если поместить его в svg, верхняя часть элемента исчезнет с экрана.

  .square {background-color: 
    white; width 10px; height: 
    30px; font-size: 10px; 
    color: green; text-align: 
    center;position: relative; 
    relative: 200px;}

    .square {animation: img 
    100s linear infinite } 
    @keyframes img  {

    from {

    transform: translate3d(0px, 
    0px, 10px) scale(.5);

    }

    to {

    transform: translate3d(0px, 
    0px, 10px) scale(170.8);

    }

    }

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

    <svg viewBox="0 0 240 80"  
    xmlns="http://www.w3.org/
    2000/svg">
  
    <style>
    .square {fill: green; 
    position: relative; top: 
    50px;} 
    </style>

    <text class="square">square</text>
    </svg>



  

Почему не требуется инструкция, когда я устанавливаю элемент на position: relative; top: 100px с css?

Я не уверен, так Я попытался определить его с помощью тега стиля и, хотя это работает для установки цвета, он не работает для позиционирования.

Итак, как мне расположить свой элемент там, где я хочу, потому что в настоящее время половина слова находится за пределами экрана, и я не могу переместить его. К тому же. Вместо того, чтобы переходить от маленького текста к большому тексту в увеличенном виде, как в середине экрана, он идет маленьким слева от экрана к большому правому краю экрана. Почему как?