javascript - SVG 动画(移动)文本，同时其内容发生变化

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