Question

我用SVG创建了一个沙漏动画。它在chrome＆amp;＆amp ;;歌剧，但在Firefox上有一些问题。

沙漏可以暂停，然后又恢复。现在在chrome / opera中，我可以读取d的当前值，然后将其应用于resume上的动画元素，但是在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属性。它比镀铬/歌剧更不舒服，但至少有一种方式：）

对于有相同问题的人，我写了这个函数来返回一个字符串，就像你在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)

希望它对其他人也有帮助，如果您发现我的代码有任何问题，请发表评论，谢谢。

Firefox中的SVG路径动画访问数据不起作用

1 个答案: