Bonjour la communauté!

Je bloque depuis plusieurs heures sur un problème concernant les SVG inline, dont je n'arrive pas à modifier le style, et je commence à m'interroger sur la faisabilité.

Le SVG est composé de plusieurs éléments et j'aimerais pouvoir modifier le style de ces éléments indépendamment lorsque je passe la souris sur le SVG.

Voici mon code actuel (https://codepen.io/anon/pen/mBoOvr)

<svg width="50" height="50">

    <style>

        svg {

          border: 1px solid green;

        }

        #shape2 .circle {

          fill:red;

        }

        #shape2 .rect {

          fill:white;

        }

        #shape2:hover .circle {

          fill:blue;

        }

        #shape2:hover .rect {

          fill:green;

        }

</style>

    <symbol id="shape2">

        <circle class="circle" cx="25" cy="25" r="25" />

        <rect class="rect" x="7" y="20" height="10" width="30"  /> 

    </symbol> 

</svg>

<svg class="icon">

    <use xlink:href="#shape2" x="0" y="0" />

</svg>

La partie qui ne fonctionne pas correspond au chemin "#shape2:hover element" où element est circle ou rect. J'ai testé également ".icon element" mais cela ne fonctionne pas.

Avez vous des suggestions ?

Merci pour votre aide!