Question

我正在尝试将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>

Answer 1

这将通过SMIL对每个字母进行动画处理。由于SMIL动画仅适用于单个目标，因此有点重复。

我们还必须避免在错误的位置使用空格，否则text元素将假定我们实际上是要显示它，而不是为了整洁。

<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>

SVG动画：tspan翻译

1 个答案: