SVG path animation access data in firefox not working

问题

I have created a Hourglass animation with SVG. It works fine in chrome && opera, but has some issues on firefox.

The Hourglass could be paused and then later on resumed. Now in chrome/opera I can read the current value of d and then to apply it for the animation element on resume, but in firefox the attribute isn't being updated and therefor I can't assign the current attribute value to the resumed element.

I tried: Using the Element.animate() API but it is also not changing the current value of the element. Using getComputedStyle() method but it can't get the value of d since firefox isn't refering to it as a css property.

This is the example code: 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)

The questions are: 1. How to get the current d value in firefox? 2. Is it possible without extra libraries?

I made a simple example

And this is the hourglass if anyone wants to see where it is needed

Anyone knows something about it?

回答1:

So using @RobertLongson tip I managed to get the current d attribute. It is way less comfortable than it is in chrome/opera but at least there is a way :)

For people with the same problem I wrote this function to return a string the same way you would get in chrome:

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)

Hopefully it would be helpful for others too, if you find any problem with my code please leave a comment, thanks.

来源：https://stackoverflow.com/questions/46201088/svg-path-animation-access-data-in-firefox-not-working