在Firefox中SVG路径动画访问数据不工作

问题描述：

我用SVG创建了一个沙漏动画。它在铬& &歌剧，但在Firefox上有一些问题工作正常。在Firefox中SVG路径动画访问数据不工作

沙漏可以暂停，然后再恢复。现在在Chrome/Opera中，我可以读取d的当前值，然后将其应用于resume中的动画元素，但是在firefox中，属性未更新，因此我无法将当前属性值分配给恢复的元素。

我试过了：使用Element.animate（）API，但它也不会改变元素的当前值。使用getComputedStyle（）方法，但它不能得到d的值，因为firefox没有将其引用为css属性。

这是示例代码： 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如果有人想看看它需要

任何人都知道的东西呢？

使用mypath.animatedPathSegList获取当前值。 https://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList –

@RobertLongson它给我的观点，虽然它不像在铬中那么直截了当。但我想我可以将它处理成我需要的东西，thx！ – cowCrazy

答

所以使用@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)

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

在Firefox中SVG路径动画访问数据不工作

相关推荐