web-dev-qa-db-fra.com

CSS - Changer la couleur de remplissage au survol - CHEMIN SVG

im en utilisant le pack d'icônes d'interface utilisateur moderne dans mon projet en utilisant le chemin svg.

ce que j'essaie de faire est de changer la couleur de remplissage en survol.

mais je n'ai aucun succès ..

j'espère que quelqu'un m'aidera avec ça.

Merci d'avance.

Code:

<div id="Main">
   <ul>
      <li>
          <form>
             <button>
                <div class="inner">
                   <svg>
                     <path d="M35.......etc..">
                     </path>
                   </svg>
                </div>
             </button>
          </form>
      </li>
   </ul>
</div
htmlcsshtml5css3svg
20
user2232273

Vous pouvez remplacer la propriété svg css comme indiqué ci-dessous.

#Main svg:hover {
    fill: #fce57e;
}
33
Rajnikant Kakadiya

Désolé d'avoir répondu à un très très vieux message.

Je pense que le meilleur moyen est de voir quelle balise a été placée dans votre <svg>.

Ainsi, par exemple:

<svg>
    <path>...</path>
</svg>

Comme vous pouvez voir le <path> la balise est enveloppée par le <svg>. Ensuite, vous pouvez simplement ajouter <path> de cette façon en CSS:

svg:hover path { 
    fill: #fce57e;
}

Voici l'extrait de travail:

svg:hover path {
  fill: black;
  transition: all ease 0.3s;
}

svg path {
  transition: all ease 0.3s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.19 50.36" width="15%" class="go-location-all" id="go-location-icon"><defs><style>.cls-1{fill:#DF1E34;}</style></defs><title>find-location</title><g id="Layer_2" data-name="Layer 2"><g id="artwork"><path class="cls-1" d="M20.75,22.56a1.09,1.09,0,1,0-1-1.93,6.71,6.71,0,1,1,3.56-5.92,1.1,1.1,0,0,0,2.19,0,8.88,8.88,0,1,0-4.73,7.85Z"/><path class="cls-1" d="M15.88,44.28a1.07,1.07,0,0,0,.71.27,1.09,1.09,0,0,0,.67-.23,37.31,37.31,0,0,0,7-7.8,38.45,38.45,0,0,0,7-21.82,14.71,14.71,0,1,0-29.41,0c0,9,3.8,16.58,7,21.33A44.52,44.52,0,0,0,15.88,44.28Zm.71-42.09A12.53,12.53,0,0,1,29.11,14.71a36.16,36.16,0,0,1-6.57,20.5A38.39,38.39,0,0,1,16.63,42a46.29,46.29,0,0,1-6-7.22c-3-4.49-6.58-11.62-6.58-20.06A12.52,12.52,0,0,1,16.59,2.19Z"/><path class="cls-1" d="M24.51,40.69a1.1,1.1,0,0,0-.32,2.17C29.59,43.67,31,45,31,45.25s-.79,1-3.94,1.83a45.38,45.38,0,0,1-10.47,1.09A45.29,45.29,0,0,1,6.13,47.08C3,46.3,2.22,45.44,2.19,45.25S3.59,43.67,9,42.86a1.09,1.09,0,0,0-.32-2.16C4.7,41.29,0,42.57,0,45.25c0,1.66,1.8,3,5.36,3.9a46.84,46.84,0,0,0,11.23,1.21,47,47,0,0,0,11.24-1.21c3.55-.92,5.36-2.24,5.36-3.9C33.19,42.56,28.47,41.29,24.51,40.69Z"/></g></g></svg>
3
Anderson Koh