CODEWITHSUNDEEP
javascriptsvg
user3375489
user3375489

Reputation: 13

Rotating an SVG using a variable

I am trying to rotate an SVG with a variable "richting". I think the code should look something like this, but I'm having a hard time finding specific information on this. 

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

The SVG looks like this: 

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

The SVG is in a seperate file in the same folder as my Javascript, it is called airplane.svg.

I have also tried:

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

Thanks for your help

Upvotes: 1

Views: 1094

Answers (1)

ashishmaurya
ashishmaurya

Reputation: 1196

transformation is not an attribute it's a css styling
note: I have added a style attribute to g tag in html

your html whould be

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

and script whould be

<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

Upvotes: 1

Related Questions