在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如果有人想看看它需要

任何人都知道的東西呢？

來源

2017-09-13 cowCrazy

使用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)

希望這對其他人也有幫助，如果您發現我的代碼有任何問題，請發表評論，謝謝。

來源

2017-09-14 08:28:12 cowCrazy

在Firefox中SVG路徑動畫訪問數據不工作

回答

相關問題