Я пытаюсь сделать динамически сгенерированный SVG, который отображает некоторые данные из конечной точки API. Если текст ответа слишком длинный, текст становится бесконечно прокручивающим шатер через анимацию CSS. Тем не менее, я сталкиваюсь с проблемой, что Transformx (100%) для элемента внутри SVG не на 100% от размера текста, а родительский элемент вместо этого (см. Здесь), что означает, что анимация не масштабируется с длиной. Есть ли какой -нибудь способ, который я могу вместо этого зацикливаться на анимации на основе размера текстового элемента? : (
Некоторый стиль в animatedtitle :
.title {
animation-name: overflow-scroll;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
max-width: none;
}
@keyframes overflow-scroll{
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
< /code>
Создание SVG: < /p>
{ titleData.length > 22 ? animatedTitle : "" }
{titleData}
{ titleData.length > 22 && {titleData}}
Подробнее здесь: https://stackoverflow.com/questions/797 ... s-own-size
