Question

https://jsfiddle.net/L1u83Lts/1/＆lt; - 那是我的内联svg代码，它里面有一些css，所以当你将鼠标悬停在父div上时，路径会改变颜色，我想知道它是否会变色可以用这个svg使用css transform：rotate（）吗？我尝试了一些方法，但我知道我错过了一些东西。

此处代码也是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

你的意思是这样吗？

＆＃13;

document.getElementById("menu_btn").addEventListener("click", function(evt) {
  
  document.getElementById("part1").beginElement();
  
});

＆＃13;

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

＆＃13;

如何旋转内联svg？

1 个答案: