SVG анимирует (перемещает) текст из точки A в B, пока его содержимое меняется - PullRequest
Новая
       17

SVG анимирует (перемещает) текст из точки A в B, пока его содержимое меняется

1 голос
/ 10 октября 2019

Я хотел бы анимировать (переместить) элемент 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);

Моя цель - переместить текст (внутри круга ) при изменении текста,Проблема в том, что текст не двигается. Только круг действительно движется.

кстати. Я не могу использовать 

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. Так что либо меняй, либо двигайся.

1 Ответ

2 голосов
/ 10 октября 2019

Когда вы делаете textContent = "" + counter;, вы удаляете анимацию изнутри текстового элемента. Однако вы можете объявить анимацию вне анимированного элемента (в данном случае текст) и указать явный целевой элемент для анимации, используя атрибут xlink:href для ссылки на идентификатор цели: 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, потому что хотел посмотреть, что я делаю. Вы можете использовать то, что вы хотите.

...