animateTransform이 IE 11에서 작동하지 않습니다.

svg animation을 처음 사용하고 있습니다. 아래는 다른 라인 위에 애니메이션을 위아래로 움직이는 코드입니다. 이것은 Mozilla와 Chrome에서 완벽하게 작동하지만 IE 11에서는 작동하지 않습니다. 누락 된 부분을 도와 줄 수있는 사람이 누구입니까? ?animateTransform이 IE 11에서 작동하지 않습니다.

<!DOCTYPE html> 
 
<html> 
 
<head><title></title> 
 

 
</head> 
 
<body> 
 
\t <svg height="210" width="500"> 
 
\t <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
\t <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"> 
 
\t \t <animateTransform attributeName="transform" 
 
     type="translate" 
 
     values="200 200;-150 -150;200 200" 
 
     begin="0s" 
 
     dur="5s" 
 
     repeatCount="indefinite" 
 
    /> 
 
\t </line> 
 
\t </svg> 
 

 

 
\t 
 
</body> 
 
</html>

출처

2016-06-13 Anusha Sajeendran

IE는 SMIL을 지원하지 않습니다. –

[fakeSmile] (https://leunen.me/fakesmile/)을 사용하여 지원을 추가 할 수 있습니다. 라이브러리 추가 (fakemile)가로드를 증가시키기 때문에 을 사용하는 것이 좋습니다. 시각.? –

당신은 내가 생각하기에 자신 만의 애니메이션 라이브러리를 작성할 수 있습니다. –

IE 및 Edge는 SMIL 또는 CSS 변환을 지원하기 위해 표시되지 않습니다; 변환/위치, 회전/방향 또는 기울이기 등에 영향을주기 위해 변환 속성을 설정해야합니다.

이상하게도 JavaScript는 CSS를 사용하여 적용된 변환을 계산할 수 있습니다. 키 프레임 또는 전환 효과가 브라우저에서 렌더링되지 않더라도 마찬가지입니다. 이 점을 염두에두고, 라인에 식별자의 형태를 부여하고 CSS를 사용하여 애니메이션을 적용한 다음 50ms (초당 ~ 20 프레임)마다 수동으로 변환 속성을 적용 할 수 있습니다. 그것은 또한 몇 가지 브라우저 감지 기능을 추가하는 가장 좋은 것입니다, 그래서 CSS 애니메이션을 읽을 때 변환 속성 합성 문제가 발생할 수 있습니다 올바르게 변환

브라우저이 방법에 대한

<svg height="210" width="500"> 
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line> 
<line id="line" x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"></line> 
</svg> 

<style> 
    // Switch to CSS Animations 
    @-webkit-keyframes line-animate { 
     0% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
     50% { 
      -webkit-transform: translate(-150px, -150px); 
        transform: translate(-150px, -150px); 
     } 
     100% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
    } 
    @keyframes line-animate { 
     0% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
     50% { 
      -webkit-transform: translate(-150px, -150px); 
        transform: translate(-150px, -150px); 
     } 
     100% { 
      -webkit-transform: translate(200px, 200px); 
        transform: translate(200px, 200px); 
     } 
    } 
    #line { 
     -webkit-animation: line-animate 5s linear infinite; 
       animation: line-animate 5s linear infinite; 
    } 
</style> 
<script> 
    (function(){ 
     var line = document.getElementById('line'); 
     // Iterative function 
     line.animate = function() { 
      // Set the line transform attribute to match the calculated CSS transform value. 
      line.setAttribute('transform', getComputedStyle(line).getPropertyValue('transform')); 
      setTimeout(line.animate, 50); 
     }; 
     line.animate(); 
    })(); 
</script>

노트, 설정 IE. 그럼에도 불구하고 대부분의 브라우저는 스타일 변환이 적용될 때 변환 속성을 무시합니다.

애니메이션을 적용하려는 SVG 요소에 이미 변형 특성이있는 경우 모든 점, 거리 및 경로를 변환 된 값으로 변환해야합니다.

추가를 사용하는 SMIL 애니메이션의 경우 변환 값을 다시 계산해야합니다.

getComputedStyle은 리소스 집약적 일 것으로 예상되므로 브라우저 성능 문제를 방지하기 위해 애니메이션을 적용 할 요소의 수를 제한해야 할 수도 있습니다.

출처

2018-02-21 04:43:58

animateTransform이 IE 11에서 작동하지 않습니다.

답변

관련 문제