SVG 경로 애니메이션 액세스 데이터가 파이어 폭스에서 작동하지 않습니다.

Question

SVG로 모래 시계 애니메이션을 만들었습니다. 크롬에서 잘 작동합니다 & & 오페라이지만 firefox에는 몇 가지 문제가 있습니다.

모래 시계가 일시 중지되었다가 나중에 다시 시작될 수 있습니다. 이제 크롬/오페라에서 나는 d의 현재 값을 읽고 이력서의 애니메이션 요소에 적용 할 수 있지만 firefox에서는 속성이 업데이트되지 않으므로 현재 속성 값을 재개 된 요소에 할당 할 수 없습니다. .

시도 : Element.animate() API를 사용하지만 요소의 현재 값을 변경하지 않습니다. getComputedStyle() 메서드를 사용하지만 파이어 폭스가 CSS 속성으로 참조하지 않기 때문에 d 값을 가져올 수 없습니다. svg.html <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <path d="M 0 0 L 0 200 L 200 200 L 0 0 Z" fill="black" id="myPath"/> </svg>

svg.js

var myPath = document.getElementById('myPath'); 

var anima = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); 
anima.setAttributeNS('', 'attributeType', 'XML'); 
anima.setAttributeNS('', 'attributeName', 'd'); 
anima.setAttributeNS('', 'values', 'M 0 0 L 0 200 L 200 200 L 0 0 Z; M 0 0 L 100 100 L 200 200 L 0 0 Z'); 
anima.setAttributeNS('', 'dur', '5s'); 
anima.setAttributeNS('', 'fill', 'freeze'); 
myPath.appendChild(anima); 
myPath.lastChild.beginElement(); 

setTimeout(() => { 
    console.log(myPath.getAttribute('d')); // in chrome gives the current value, in firefox gives the element original value 
}, 1500) 

질문은 다음과 같습니다 :

이 예제 코드입니다 1. 어떻게 파이어 폭스에서 현재 d 값을 얻는 방법? 2. 추가 라이브러리 없이도 가능합니까?

은 내가 simple example

를 만든 사람이이

필요한 사람이 그것에 대해 뭔가를 알고있는 위치를보고 싶어하면 이것은 hourglass입니까?

Answer 1

그래서 @RobertLongson 팁을 사용하여 현재 d 속성을 얻을 수있었습니다. 크롬/오페라보다 덜 편안하지만 적어도 방법이 있습니다.

동일한 문제가있는 사람들을 위해 크롬에서와 같은 방식으로 문자열을 반환하는이 함수를 작성했습니다 :

var pointOrders = { // all data types and thier order 
    A: ['pathSegTypeAsLetter', 'rx', 'ry', 'angle', 'largeArcFlag', 'sweepFlag', 'x', 'y'], 
    C: ['pathSegTypeAsLetter', 'x1', 'y1', 'x2', 'y2', 'x', 'y'], 
    H: ['pathSegTypeAsLetter', 'x'], 
    L: ['pathSegTypeAsLetter', 'x', 'y'], 
    M: ['pathSegTypeAsLetter', 'x', 'y'], 
    Q: ['pathSegTypeAsLetter', 'x1', 'y1', 'x', 'y'], 
    S: ['pathSegTypeAsLetter', 'x2', 'y2', 'x', 'y'], 
    T: ['pathSegTypeAsLetter', 'x', 'y'], 
    V: ['pathSegTypeAsLetter', 'Y'], 
    Z: ['pathSegTypeAsLetter']  
} 

function pointStr(pointArr, pointType, orders){ 
    var str = ""; 
    for (var i = 0; i < orders[pointType].length; i++){ 
     var point = pointArr[orders[pointType][i]]; 
     if(typeof point === 'number'){ 
      if(point.toString().match(/\d+.\d{4,}/)){ 
       point = point.toFixed(3); 
      } 
      point += " "; 
     } 
     str += point; 
    } 
    return str; 
} 

function dString(dDetailArray){ 
    var dStr = ""; 
    for (var p = 0; p < dDetailArray.length; p++){ 
     var type = dDetailArray[p].pathSegTypeAsLetter; 
     if(type.match(/[aA]/)){ 
      dStr += pointStr(dDetailArray[p], 'A'); 
     } 
     else if(type.match(/[cC]/)){ 
      dStr += pointStr(dDetailArray[p], 'C'); 
     } 
     else if(type.match(/[hH]/)){ 
      dStr += pointStr(dDetailArray[p], 'H'); 
     } 
     else if(type.match(/[lL]/)){ 
      dStr += pointStr(dDetailArray[p], 'L'); 
     } 
     else if(type.match(/[mM]/)){ 
      dStr += pointStr(dDetailArray[p], 'M'); 
     } 
     else if(type.match(/[qQ]/)){ 
      dStr += pointStr(dDetailArray[p], 'Q'); 
     } 
     else if(type.match(/[sS]/)){ 
      dStr += pointStr(dDetailArray[p], 'S'); 
     } 
     else if(type.match(/[vV]/)){ 
      dStr += pointStr(dDetailArray[p], 'V'); 
     } 
     else if(type.match(/[zZ]/)){ 
      dStr += pointStr(dDetailArray[p], 'Z'); 
     } 
     else{ 
      throw `${type} is an invalid data type` 
     } 
    } 
    return dStr; 
} 

currentPathData(yourPathElem.animatedPathSegList, pointOrders) 

제 코드에 문제가 있으면 다른 사람에게 도움이되기를 바랍니다. 감사의 말을 남겨주세요.