Блог

Главная - Вопросы по программированию - Можно ли анимировать/перенести текстовый атрибут svg?

Можно ли анимировать/перенести текстовый атрибут svg?

#javascript #animation #transition

Вопрос:

Я хочу анимировать атрибут текста svg с 55% до 100% при наведении курсора.

Я сделал это, но я не могу найти способ анимировать атрибут textLength.

 <div class="image-with-text__wrapper">
  <a href="/collections/clothing" class="image-with-text__heading">
    <svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
      <text id="shopText" y="40" textLength="55%">Shop</text>
    </svg>
  </a>
</div>

<script>
    var svgElement = document.getElementById("shopText");
    var elementHover = document.getElementById("shopHover");
    elementHover.addEventListener("mouseover", mouseOver);
    elementHover.addEventListener("mouseout", mouseOut);

    function mouseOver() {
      svgElement.setAttribute("textLength", "100%");
    }
    function mouseOut() {
      svgElement.setAttribute("textLength", "55%");
    }
</script>

Ответ №1:

У вас была ошибка в коде, которая не связана с текстовой анимацией. У вас в коде нет Shopover, поэтому вы никогда не запускали наведение курсора мыши.

Короткое исправление приводит к следующему:

 <div class="image-with-text__wrapper">
    <a href="/collections/clothing" class="image-with-text__heading">
      <svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
        <text id="shopText" y="40" textLength="55%">Shop</text>
      </svg>
    </a>
  </div>
  
  <script>
      var svgElement = document.getElementById("shopText");
      svgElement.addEventListener("mouseover", mouseOver);
      svgElement.addEventListener("mouseout", mouseOut);
  
      function mouseOver() {
        svgElement.setAttribute("textLength", "100%");
      }
      function mouseOut() {
        svgElement.setAttribute("textLength", "55%");
      }
  </script>

Этот код должен работать и анимировать ваш SVG-текст.

Ответ №2:

Эй, приведенный выше ответ верен, но я думаю, что вы действительно хотите, чтобы он был анимирован снаружи, поэтому я пошел дальше и написал небольшой анимационный код. Это чистый ванильный js, так что он должен быть хорошим. проверить это.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Satisfyamp;display=swap" 
rel="stylesheet">
<style>
    .image-with-text__wrapper {
        height: auto;
        width: auto;
    }

    #shopText {
        font-family: 'Satisfy', cursive;
    }
 </style>
 </head>

 <body>
 <div class="image-with-text__wrapper">
    <a href="/collections/clothing" class="image-with-text__heading">
        <svg viewBox="-1 -5 200 40" xmlns="http://www.w3.org/2000/svg">
            <text id="shopText" y="20" font-size="16" textLength="55%">Shop</text>
        </svg>
    </a>
  </div>

  <script>
    var svg = document.querySelector('.image-with-text__wrapper');
    var svgElement = document.getElementById("shopText");
    svg.addEventListener("mouseover", mouseOver, false);
    svg.addEventListener("mouseout", mouseOut, false);
    var i;
    function getlength() {
        var s = svgElement.getAttribute("textLength");
        i = s.split('%', 1)[0];
    }

    function spaceout() {
        svgElement.setAttribute("textLength", i   "%");
        i  ;
        if (i < 101)
            window.requestAnimationFrame(spaceout);
        else
            getlength();

    }
    function spacein() {
        svgElement.setAttribute("textLength", i   "%");
        i--;
        if (i > 54)
            window.requestAnimationFrame(spacein);
        else
            getlength();

    }
    function mouseOver() {
        getlength();
        spaceout();
    }
    function mouseOut() {
        getlength();
        spacein();
    }
   </script>
  </body>

  </html>
Метки: