shadow in svg on hover

Question

Я не вижу, что я делаю неправильно, поэтому, возможно, кто-то еще будет!

Здесь: Я создал кнопку Facebook в svg. Когда я наводил курсор на кнопку, я хотел бы, чтобы она «погрузилась в фоновый режим», используя встроенную тень.

Вот 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> 

Группа с идентификатором «тени» должны отображаться, когда я зависать над ним, но это не так. Кто видит мою ошибку?

Thanx,

Тома

Answer 1

Теневые элементы дисплея: нет, и поэтому не отображаются. Там нет ничего, чтобы зависнуть.

Это поворачивает тень, когда вы наведываетесь над кнопкой, предполагая, что это то, чего вы хотите достичь. Есть дополнительный скрытый круг, чтобы поймать все события, а передний план - это указатели-события: нет, поэтому он не мешает захвату событий наведения.

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