Question

我正在尝试使用变量＆＃34; Richting＆＃34;来旋转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

中为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

使用变量旋转SVG

1 个答案: