연결된 svg 애니메이션이 작동하지 않습니다. 인라인으로 잘 작동

여기에 표시된 방법을 통해 애니메이션을 적용하고있는 여러 경로로 구성된 svg 파일이 있습니다 . 이것은 애니메이션 경로의 표준 방법입니다. 대시 오프셋이있는 것과 그렇지 않은 것입니다.

코드를 테스트 한 결과 인라인으로 작성된 svg 파일에서 제대로 작동합니다. 즉, svg 경로에 대한 코드가 스크립트와 동일한 문서에 직접 작성됩니다. 여기 에서 실제 동작을 볼 수 있습니다 . 사용되는 스크립트는 다음과 같습니다.

$(document).ready(function(){

    var path = document.getElementsByTagName('path');
    var length;
    var anim = document.getElementsByTagName('animate');

    for(i = 0; i < path.length; i++){
        length = path[i].getTotalLength().toString();
        path[i].setAttribute('stroke-dasharray',length+','+length);
        anim[i].setAttribute('values','-'+length+';0');
    }

});

그러나에서 svg 파일로 작동하도록 만들려고 할 때 <object>운이 좋지는 않습니다. 파일을 올바르게 배치했는데 잘 표시됩니다. 수정 된 스크립트를 실행하면 정상적으로 실행되고 길이 값과 길이 값을 할당하고 각 요소 <path>와 <animate>요소에 할당 해야합니다 (svg 요소를 검사하여 확인할 수 있습니다. stroke-dasharray속성은 각 경로의 길이와 동일한 값을 가져야합니다.) ).

문제는 값이 애니메이션을 트리거해야하는 값으로 적절하게 변경 되었음에도 불구하고 애니메이션이 적용되지 않는다는 것입니다. 코드가 현재 문서가 아닌 svg 문서를 살펴 보는 것을 제외하고는 코드가 인라인 문서와 똑같이 작동하기 때문에 이것이 왜 그런지 잘 모르겠습니다. 여기에 스크립트의 수정 된 버전이 있습니다. 인라인이 아닌로드 된 svg) :

$(document).ready(function(){
    var a = document.getElementById("logoSVG");
    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
    a.addEventListener("load",function(){
        var svgDoc = a.contentDocument; //get the inner DOM of .svg
        var path = svgDoc.getElementsByClassName('line');
        var length;
        var anim = svgDoc.getElementsByTagName('animate');

        for(i = 0; i < path.length; i++){
            length = path[i].getTotalLength().toString();
            path[i].setAttribute('stroke-dasharray',length+','+length);
            anim[i].setAttribute('values','-'+length+';0');
        }
    },false);
});

위의 코드가 실제로 작동하는 것을보고 싶다면 (인라인이 아닌로드되는 위치) 여기에 있습니다 .