使用變量旋轉SVG

Question

我想旋轉一個帶有變量「富」的SVG。我認爲代碼應該看起來像這樣，但我很難找到關於這方面的具體信息。

var airplane = document.getElementById("groot_vliegtuig"); 
airplane.setAttribute("attributeName", "transform"); 
airplane.setAttribute("type", "rotate"); 
airplane.setAttribute("angle", richting); 

的SVG看起來是這樣的：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build  0) --> 
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'   'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> 
<svg id="groot_vliegtuig" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="500px" viewBox="0 0 500 500" width="500px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 500 500"> 
<g id="_x32_" > 
    <path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z"/> 
<path stroke="#000" stroke-width="0.2" d="M31.356,500.29c-17.26,0-31.256-13.995-31.256-31.261v-437.67c0-17.265,13.996-31.261,31.256-31.261h437.68c17.266,0,31.261,13.996,31.261,31.263v437.67c0,17.266-13.995,31.261-31.261,31.261h-437.67z" fill="none"/> 
</g> 
</svg> 

的SVG是在同一文件夾中我的JavaScript一個單獨的文件，它被稱爲airplane.svg。

我也曾嘗試：

var animation = document.createElementNS('airplane.svg', 'animateTransform'); 
animation.setAttributeNS(null, 'attributeName', 'transform'); 
animation.setAttributeNS(null, 'type', 'rotate'); 
animation.setAttributeNS(null, 'values', richting); 

感謝您的幫助

Answer 1

transformation不是attribute這是一個css styling
注：我在HTML

添加style屬性到g標籤

你的html應該是

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build  0) --> 
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'   'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> 
<svg id="groot_vliegtuig" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="500px" viewBox="0 0 500 500" width="500px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 500 500"> 
<g id="_x32_" style="" > 
    <path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z"/> 
<path stroke="#000" stroke-width="0.2" d="M31.356,500.29c-17.26,0-31.256-13.995-31.256-31.261v-437.67c0-17.265,13.996-31.261,31.256-31.261h437.68c17.266,0,31.261,13.996,31.261,31.263v437.67c0,17.266-13.995,31.261-31.261,31.261h-437.67z" fill="none"/> 
</g> 
</svg> 

和腳本對子級是

<script> 
richting = "10deg"; 
var airplane = document.getElementById("_x32_"); 
console.log(airplane); 

airplane.style.transform="rotate("+richting+")"; 

airplane.style.WebkitTransform="rotate("+richting+")"; 

airplane.style.MozTransform="rotate("+richting+")"; 

</script> 

WORKING DEMO JSFIDDLE