Как я могу оживить текст до l oop, как бегущая строка новостей, вокруг неправильного (ни идеально плоского, ни идеально круглого) пути? - PullRequest
0 голосов
/ 06 августа 2020

Моя цель состоит в том, чтобы оживить текст так, чтобы он перемещался по d-пути, как бегущая строка новостей (за исключением того, что в данном случае путь нерегулярный). ключевые кадры для увеличения значения startOffset, но если вы установите для startOffset достаточно высокое значение (попробуйте установить его на 50 в фрагменте кода ниже), он создает пространство в начале текста и скрывает конец текста вместо зацикливания.

Так как контур не является идеальным кругом, простое вращение всего SVG не срежет его.

<svg viewBox="-10 -10 100 100">
            <path id="MyPath" fill="none" stroke="" d="M 20 20 C 90 0 100 60 40 60 C 10 60 0 30 20 20 Z" />
            <g>
            <text>
                <textPath id="text-path" href="#MyPath" style="font-size: 5px !important; "  startOffset="0">
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </textPath>
            </text>
            </g>
        </svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...