SVGのパスアニメーションのデータがFirefoxで動作しない

Question

SVGで砂時計のアニメーションを作成しました。 これはChromeでうまく動作します& &オペラですが、firefoxにはいくつかの問題があります。

砂時計を一時停止してから、後で再開することができます。今クロム/オペラでは、私はdの現在の値を読んで、それを再開時にアニメーション要素に適用することができますが、Firefoxでは属性が更新されていないため、現在の属性値を再開要素に割り当てることができません。

私は試しました： Element.animate（）APIを使用していますが、要素の現在の値も変更されていません。 getComputedStyle（）メソッドを使用していますが、firefoxはそれを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.どのようにFirefoxで現在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) 

私のコードで問題が見つかった場合は、他の人にも役立つことを望みます。