Текстовый элемент в анимированном SVG движется в заикающем движении - PullRequest
Новая
       16

Текстовый элемент в анимированном SVG движется в заикающем движении

0 голосов
/ 14 февраля 2020

Базовые c геометрические элементы SVG могут быть расположены в долях пикселя, но, видимо, не так text элементов, как показано в примере сценария. Хотя движение элемента rect плавное, движение элемента text больше похоже на заикание, возможно потому, что позиция округлена до следующего полного пикселя, поэтому текст не выглядит размытым из-за проблем сглаживания или около того. Но в этом контексте перемещения текста это округление не имеет смысла, но вызывает заикание. Это всего лишь предположение, может быть, я ошибаюсь.

У кого-нибудь есть решение, как сделать движение элемента text столь же плавным, как и у элемента rect? Спасибо. 

<html>
  <svg width="800" height="800">
    <rect x='0' y='0' width='250' height='50' fill='none' stroke='black' stroke-width='4' />
    <text x='0' y='0' fill='black' font-size='40' font-weight='bold' text-anchor='middle'>Hello, world!</text>
  </svg>
  <script>
    function moveElements() {
      document.getElementsByTagName("rect")[0].setAttribute("x", p);
      document.getElementsByTagName("rect")[0].setAttribute("y", p);
      document.getElementsByTagName("text")[0].setAttribute("x", p + 125);
      document.getElementsByTagName("text")[0].setAttribute("y", p + 38);
      p += .1;
    }
    p = 0;
    setInterval(moveElements, 20);
  </script>
</html>

1 Ответ

0 голосов
/ 18 февраля 2020

Так как это происходит только тогда, когда базовая линия текста параллельна пиксельной сетке, или, другими словами: точно по горизонтали, проблему можно обойти, повернув текст крошечной частью, едва видимой для глаза, но достаточно большой, чтобы избежать пиксельной сетки, вот так (не слишком элегантно, скорее взломать, но у меня работает): 

<html>
  <svg width="800" height="800">
    <rect x='0' y='0' width='250' height='50' fill='none' stroke='black' stroke-width='4' />
    <text x='0' y='0' fill='black' font-size='40' font-weight='bold' text-anchor='middle'>Hello, world!</text>
  </svg>
  <script>
    function moveElements() {
      document.getElementsByTagName("rect")[0].setAttribute("x", p);
      document.getElementsByTagName("rect")[0].setAttribute("y", p);
      document.getElementsByTagName("text")[0].setAttribute("x", p + 125);
      document.getElementsByTagName("text")[0].setAttribute("y", p + 38);
      document.getElementsByTagName("text")[0].setAttribute("transform", "rotate(.05 " + (p + 125) + " " + (p + 25) + ")");
      p += .1;
    }
    p = 0;
    setInterval(moveElements, 20);
  </script>
</html>
...