shadow in svg on hover - css

Question

I don't see what I'm doing wrong, so perhaps someone else will!
Here goes: I've made a Facebook button in svg. When I hover over the button I would like it to "sink into the background" using a inline shadow.
Here is the 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>
The group with ID "shadow" should display when I hover over it, but it doesn't. Who sees my mistake?
Thanx,
Thom

Answer 1

The shadow elements are display:none and are therefore not rendered. There's nothing there to hover over.
This turns on the shadow when you hover anywhere over the button, assuming that's what you want to achieve. There's an additional hidden circle to catch all the events and the foreground is pointer-events: none so it doesn't interfere with the catching of the hover events.
<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>