How to rotate an inline svg? - css

Question

https://jsfiddle.net/L1u83Lts/1/ <-- That is my inline svg code, it has some css inside already so when you hover over the parent div, #menu_btn, the path changes color, I would like to know if it would be possible to use css transform: rotate() with this svg? I've tried a few methods but I know I'm missing something.
Code here as well vvv
<svg id="menu_svg" enable-background="new 0 0 512 512" height="75px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="80px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#menu_svg {
width: 100%;
height: 100%;
}
.menu_svg {
fill: white;
}
#menu_btn:hover + #menu_svg .menu_svg {
fill: #FC0;
}
</style>
<defs>
<g id="menu_svg_cont">
<path d="M197.396,249.5c1.664,0,3.327,0.635,4.596,1.904L319.2,368.612c2.539,2.539,2.539,6.654,0,9.192 c-2.538,2.538-6.654,2.538-9.192,0L192.8,260.596c-2.539-2.539-2.539-6.654,0-9.192C194.069,250.135,195.732,249.5,197.396,249.5z " />
<path d="M314.604,132.292c1.664,0,3.327,0.634,4.596,1.904c2.539,2.539,2.539,6.654,0,9.192L201.992,260.596 c-2.538,2.539-6.653,2.539-9.192,0c-2.539-2.539-2.539-6.654,0-9.192l117.208-117.208 C311.277,132.927,312.941,132.292,314.604,132.292z"/>
</g>
</defs>
<g class="menu_svg">
<use xlink:href="#menu_svg_cont"/>
</g>
</svg>

Answer 1

You mean like this?
document.getElementById("menu_btn").addEventListener("click", function(evt) {
document.getElementById("part1").beginElement();
});
<button type="button" id="menu_btn">Begin</button>
<svg id="menu_svg" enable-background="new 0 0 512 512" height="75px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="80px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#menu_svg {
width: 100%;
height: 100%;
}
.menu_svg {
fill: red;
}
#menu_btn:hover + #menu_svg .menu_svg {
fill: #FC0;
}
</style>
<defs>
<g id="menu_svg_cont">
<path d="M197.396,249.5c1.664,0,3.327,0.635,4.596,1.904L319.2,368.612c2.539,2.539,2.539,6.654,0,9.192 c-2.538,2.538-6.654,2.538-9.192,0L192.8,260.596c-2.539-2.539-2.539-6.654,0-9.192C194.069,250.135,195.732,249.5,197.396,249.5z " />
<path d="M314.604,132.292c1.664,0,3.327,0.634,4.596,1.904c2.539,2.539,2.539,6.654,0,9.192L201.992,260.596 c-2.538,2.539-6.653,2.539-9.192,0c-2.539-2.539-2.539-6.654,0-9.192l117.208-117.208 C311.277,132.927,312.941,132.292,314.604,132.292z"/>
</g>
</defs>
<g class="menu_svg">
<use xlink:href="#menu_svg_cont">
<animateTransform attributeType="XML" attributeName="transform" id="part1"
type="rotate" from="0 256 256" to="90 256 256"
dur="0.5s" begin="indefinite" fill="freeze"/>
<animateTransform attributeType="XML" attributeName="transform"
type="rotate" from="90 256 256" to="0 256 256"
dur="0.5s" begin="part1.end" fill="freeze" />
</use>
</g>
</svg>