动画化标签属性的值

Question

是否有一种方法可以使用JavaScript动画SVG的tspan的dy属性值，理想情况下使用Web动画API?

已知dy的值可以使用<animate />元素动画化(如图所示):

<svg>
<text x="30" y="30">FairBridge
<animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/>
</text>
</svg>

我想知道是否有可能将动画转换为JavaScript。

对于上下文，我一直使用KeyframeEffect为我所有以前的动画，并希望使用它来动画属性值，以保持动画代码的一致性。

在绝对没有办法使用KeyframeEffect的情况下，如何去动画一个标签属性的通用值?

Answer 1

只有表示属性可以使用Web Animations API动画化，因为它们也是CSS属性，XML属性不能。

在这个例子中，我可以动画fill和rotate，但不能动画x和dy。当我赋予x属性错误的值(如'100'或100)时，我在FireFox控制台中得到一个错误-当正确的值没有作用时很奇怪。dy被忽略。

var text1 = document.getElementById('text1');
var textKeyframes = new KeyframeEffect(
text1, [{
fill: 'red',
rotate: '0deg',
x: '0px',
dy: '0px'
},
{
fill: 'green',
rotate: '90deg',
x: '100px',
dy: '100px'
}
], {
duration: 2000,
fill: 'forwards'
}
);
var textAnimation = new Animation(textKeyframes, document.timeline);
textAnimation.play();

<svg viewBox="0 0 800 200">
<g transform="translate(100 100)">
<text id="text1" text-anchor="middle" dominant-baseline="middle"
font-size="30">FairBridge </text>
</g>
</svg>