腳本編寫SVG animateTransform時使用變量？

Question

我一直在嘗試通過Javascript將SVG動畫元素添加到組中。 'animateTransform'似乎只在使用數值時才起作用;當我使用通過getBBox定義的變量時，它不會播放（參見星號內的行）。但是，邊界框的腳本使用這些值。

因此，Chrome和Firefox的結果是一樣的，我猜這是我做錯了。我會很感激，如果有人可以幫我...

  var svgNamespaceURI = "http://www.w3.org/2000/svg" 
      var rectgroup; 

      function startup(evt) 
      { 
       rectgroup = document.getElementById('rectg'); 
       test(rectgroup); 
      } 

      function test(target) 
      { 
       var bounds = target.getBBox(); 
       var cx = bounds.x+(bounds.width/2); 
       var cy = bounds.y+(bounds.height/2); 

       var animation = document.createElementNS(svgNamespaceURI, 'animateTransform'); 
       animation.setAttributeNS(null, 'attributeName', 'transform'); 
       animation.setAttributeNS(null, 'type', 'rotate'); 

       **animation.setAttributeNS(null, 'values', '0,cx,cy; 360,cx,cy');>** 

       animation.setAttributeNS(null, 'begin', '0s'); 
       animation.setAttributeNS(null, 'dur', '5s'); 
       target.appendChild(animation); 
      } 

編輯：我刪除了邊界框代碼，使事情更清楚一點。

Answer 1

雖然您並未使用getBBox的結果，但您正在使用變量名稱，即字母「cx」和「cy」。您需要使用變量創建一個字符串：

animation.setAttributeNS(null, 'values', '0,' + cx + ',' + cy + '; 360,' + cx + ',' + cy); 

似乎是你想要的。