SVG 애니메이션 점프

Question

SVG (자바 스크립트)를 배우기 시작했습니다. 왜 이것이 원활하게 흐르지 않는지 이해하기가 힘듭니다. 0은 작은 양 (아마도 x 축에서 수평으로 "1")을 움직이지만, 큰 범위로 도약하기 시작합니다. 내가 사용하는 브라우저 (Chrome)가 훨씬 더 빠른 속도로 새로 고침/다시 그려지기 때문입니까? 모든 입력은 크게 감사하겠습니다. 그래서 "x"는 문자열 인 경우, x+1,

var x = +(e.getAttribute("x")); 
e.setAttribute("x",x+1); 

자바 스크립트 숫자에 문자열 "추가"선호 :

<svg width="100%" height="100%" 
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    onload="startup(evt)"> 
<script> 
function startup(evt){ 
    svgDoc=evt.target.ownerDocument; 
    setInterval(function(){ 
    e=svgDoc.getElementById("zero"); 
    var x = e.getAttribute("x"); 
    e.setAttribute("x",x+1); 
    },1000); 
} 
</script> 
<defs> 
    <text id="zero">0</text> 
</defs> 
<use x="40" y="20" xlink:href="#zero"/> 
</svg> 

Answer 1

당신은 당신이 숫자가 아닌 문자열을 작업하고 있는지 확인해야 "문자열 'x'의 끝에 '1'문자를 추가하는 것을 의미합니다. 단항 "+"연산자를 통해 .getAttribute()의 반환 값을 숫자로 강제 설정하면이 문제를 피할 수 있습니다.

(문자열을 숫자로 변환하도록 여러 가지 방법이 있습니다. 좋아하는 것을 고르세요 :-)