SVG 动画（移动）文本从 A 点到 B 点，同时其内容正在改变

Question

我想在 text 元素的内容发生变化时将其从 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);

我的目标是随着文本的变化移动文本（在圆圈内）。问题是 text 没有移动。只有圆圈会移动。

顺便说一句。我不能用

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

因为它与 SVG 动画不同步（如果出现网络瓶颈问题）。我正在使用 Chrome。

编辑：

我设法使用 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 的值，因为我想看看我在做什么。你可以使用你想要的。