悬停时svg中的阴影

Question

我看不出我做错了什么，所以也许其他人会！

这里是：我在 svg 中制作了一个 Facebook 按钮。当我将鼠标悬停在按钮上时，我希望它使用内联阴影“沉入背景”。

这是svg：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

     <style type="text/css">
    .st0{fill:#FFE06B;}
    .st1{fill:#F7C411;}
    .st2{fill:#FF9900;}
    g#shadow {display:none;}
    g#shadow:hover {display:block;}
</style>

<g id="layer_1">
    <circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
    <path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
        C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
    <g>
        <path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
            c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
    </g>
</g>
<g id="layer_3">
    <g>
        <path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
            c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
    </g>
</g>
</svg>

当我将鼠标悬停在 ID 为“shadow”的组上时，它应该会显示，但它不会。谁看到我的错误？

谢谢，

汤姆

Answer 1

阴影元素是 display:none，因此不会被渲染。没有任何东西可以悬停。

当您将鼠标悬停在按钮上的任意位置时，这会打开阴影，假设这是您想要实现的。有一个额外的隐藏圈来捕获所有事件，前景是指针事件：无，因此它不会干扰悬停事件的捕获。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

     <style type="text/css">
    .st0{fill:#FFE06B;}
    .st1{fill:#F7C411;}
    .st2{fill:#FF9900;}
    g#shadow {visibility:hidden;pointer-events:all}
    g#shadow:hover {visibility:visible;}
</style>

<g id="layer_1">
    <circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
    <path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
        C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
    <g>
        <path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
            c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
    </g>
    <circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
    <g>
        <path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
            c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
    </g>
</g>
</svg>