SVG 在文本内容更改时将文本从 A 点动画(移动)到 B 点

Question

我想在文本元素内容发生变化时将文本元素从 A 点动画(移动(到 B 点

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="300 160 350 150" height="80px" width="100%" xml:space="preserve">
<text id="text_animated"  x="422" y="280" fill="white" font-size="17">
<animate attributeName="y" from="150" to="250" begin="3s" dur="5.5s" repeatCount="1" fill="freeze"/> 
</text>
<circle cx="422" cy="280" fill="red" r="5">
<animate id="animation_depth_circle" attributeName="cy" from="150" to="250" begin="indefinite" dur="1.5s" repeatCount="1" fill="freeze" onend="endAnimate()" /> 
</circle>
</svg>

JS：

var counter=0;
var test_t = setInterval(function(){
document.getElementById('text_animated').textContent = ""+counter;
if(counter===120){
clearInterval(test_t);
}
counter=counter+1;
},10);

我的目标是在文本更改时移动文本(在圆圈内(。问题是文本不会移动。只有圆圈会移动。

顺便说一句。我不能使用

document.getElementById('text_animated').setAttribuite('y',something);

因为它与 SVG 动画不同步(如果出现网络瓶颈问题(。我正在使用浏览器。

编辑：

我设法使用 dy 移动我的文本，如下所示：

<text   x="422" y="280" fill="white" >
<animate  attributeName="dy" from="0" to="250"  dur="1.5s" repeatCount="indefinite"/> 
</text>

问题是如果我用我的 javascript 更改文本，它不会移动。所以要么改变，要么移动。

Answer 1

执行textContent = "" + counter;时，将从文本元素内部删除动画。但是，您可以在动画元素(在本例中为文本(之外声明动画，并通过使用xlink:href属性引用目标的 id：xlink:href="#text_animated"为动画提供显式目标元素。

此外，您正在对 cy 属性进行动画处理。我更喜欢使用animateTransform并制作翻译动画

var counter = 0;
var test_t = setInterval(function() {
document.getElementById("text_animated").textContent = "" + counter;
if (counter === 120) {
clearInterval(test_t);
}
counter = counter + 1;
}, 10);

svg{background:black}

<svg viewBox="350 120 150 250" width="200">
<text id="text_animated"  x="422" y="150" fill="white" font-size="17" transform="translate(0,0)">    
</text>

<animateTransform 
	attributeType="XML" 
attributeName="transform" 
type="translate"
values="0,0; 0,100" 
begin="3s"
dur="5.5s" 
repeatCount="1" fill="freeze"
xlink:href="#text_animated" />
<circle cx="422" cy="280" fill="red" r="5">
<animateTransform id="animation_depth_circle"
	  attributeType="XML" 
attributeName="transform" 
type="translate"
values="0,0; 0,100" 
begin="3s"
dur="1.5s" 
repeatCount="1" fill="freeze"/> 

</circle>
</svg>

另一种解决方案是将文本放在 tspan 元素中<tspan id="text_animated"></tspan>

var counter = 0;
var test_t = setInterval(function() {
document.getElementById("text_animated").textContent = "" + counter;
if (counter === 120) {
clearInterval(test_t);
}
counter = counter + 1;
}, 10);

svg{background:black}

<svg viewBox="350 120 150 250" width="200">
<text   x="422" y="150" fill="white" font-size="17" transform="translate(0,0)"> 
<animateTransform 
	  attributeType="XML" 
attributeName="transform" 
type="translate"
values="0,0; 0,100" 
begin="3s"
dur="5.5s" 
repeatCount="1" fill="freeze"
/>
<tspan id="text_animated"></tspan>
</text>


<circle cx="422" cy="280" fill="red" r="5">
<animateTransform id="animation_depth_circle"
	  attributeType="XML" 
attributeName="transform" 
type="translate"
values="0,0; 0,100" 
begin="3s"
dur="1.5s" 
repeatCount="1" fill="freeze"/> 

</circle>
</svg>

我已经削减了viewBox值，因为我想看看我在做什么。你可以使用你想要的。