SVG анимация: перевод tspan - PullRequest
Новая
       5

SVG анимация: перевод tspan

0 голосов
/ 22 января 2019

Я пытаюсь анимировать каждую букву SVG текстового элемента (сделать, а затем прыгать) при наведении курсора.Для этого я помещаю каждую букву в <tspan> и добавляю анимацию, во всяком случае, преобразование не работает. 

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>

<style type="text/css">
svg text tspan {
	fill: #666;
	animation:jump 5s linear;
}

@keyframes jump {
	100% {
		fill: red;
		transform: translateY(40px);
	}
}
</style>

<body>

	<svg overflow="visible">
		<text font-size="20px" x="0" y="21"><tspan>t</tspan><tspan>e</tspan><tspan >s</tspan><tspan >t</tspan></text>
    	<text font-size="20px" x="0" y="42"><tspan>2 </tspan><tspan>l</tspan><tspan>i</tspan><tspan>g</tspan><tspan>n</tspan><tspan>e</tspan></text>
	</svg>

</body>
</html>

1 Ответ

0 голосов
/ 23 января 2019

Это оживляет каждое письмо через SMIL.Это немного повторяется, так как анимация SMIL применяется только к одной цели.

Мы также должны избегать пробелов в неправильных местах, иначе текстовый элемент будет предполагать, что мы действительно хотим отобразить его, а не иметь его для аккуратности.

<svg>
  <text y="50 50 50 50">
    <tspan>T<animate
         attributeName="dy" from="0" to="-40"
         dur="5s" begin="mouseover" restart="whenNotActive" /><set
         attributeName="fill" to="red"
         dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>e<animate
         attributeName="dy" from="0" to="-40"
         dur="5s" begin="mouseover" restart="whenNotActive" /><set
         attributeName="fill" to="red"
         dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>s<animate
         attributeName="dy" from="0" to="-40"
         dur="5s" begin="mouseover" restart="whenNotActive" /><set
         attributeName="fill" to="red"
         dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>t<animate
         attributeName="dy" from="0" to="-40"
         dur="5s" begin="mouseover" restart="whenNotActive" /><set
         attributeName="fill" to="red"
         dur="5s" begin="mouseover" restart="whenNotActive" /></tspan></text>
</svg>
...