Javascript 使用变量旋转SVG

我正在尝试使用变量“richting”旋转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>

---

感谢您的帮助

转换

不是

属性

而是

css样式

注意：我在html中为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>

还有剧本

<?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>

richting=“10度”；
var飞机=document.getElementById（“x32”）；
控制台.日志（飞机）；
framework.style.transform=“rotate”（+richting+”）；
framework.style.webkitttransform=“rotate”（+richting+”）；
framework.style.MozTransform=“rotate”（+richting+”）；

---

使用此代码，我得到以下错误：无法读取null的属性“style”。您应该首先创建

style

属性。iirc在原始svg文件中添加一个伪（=empty）

style

属性就足够了。仍然存在同样的问题。plannier.style为空编辑：plannier为空@collapsar建议将空样式属性添加到svg文件中。我在标记后添加了空样式属性，但仍然会收到相同的错误。似乎var-planet=document.getElementById（“groot_vliegtuig”）；不起作用