Как повернуть встроенный svg?

Question

https://jsfiddle.net/L1u83Lts/1/ < - Это мой встроенный код svg, у него уже есть css внутри, поэтому, когда вы наводите курсор на родительский div, #menu_btn, путь меняет цвет, я хотел бы знать, можно ли использовать css transform : rotate() с этим svg? Я пробовал несколько методов, но я знаю, что чего-то не хватает.

код здесь, а 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

Вы имеете в виду, как это?

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; \t 
 
       } 
 
       #menu_btn:hover + #menu_svg .menu_svg { 
 
        fill: #FC0; 
 
       } 
 
\t \t \t </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>