How to effect "Hover" in SVG icon?

Asked

Viewed 1,235 times

2

How do I make an effect :hover on an SVG icon?

Example:

<!DOCTYPE html>
<html>
   <head>
      <title></title>   
      <style type="text/css">
        .agenda {
           fill: cyan;
        }
      </style>
   </head>
   <body>
      <img src="agenda.svg" class="agenda">
   </body>
</html>
css svg

1 answer

6

From what your question says, I imagine you wanted something like this:

.agenda {
  fill: #333;
}
.agenda:hover {
  opacity: 0.5;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg" class="agenda">

Just use the :hover css normally, as in any other element. No :hover you specify the properties that changed when you pass the mouse over the element.

An example with a svg complete:

.hover:hover{
  fill: #000;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 712 712">
  <title>HTML5 Logo</title>
  
  <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512             "/>
  <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894             "/>
  <polygon class="hover" fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
  <polygon class="hover" fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
  <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
  <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
  <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
  <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
  <polygon class="hover" fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
  <polygon class="hover" fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
<svg>

As in the above example just assign a class or a id the tag of the svg, or select it by its own name, and in css access this attribute/name and modify the necessary with the :hover.

Browser other questions tagged css svg

You are not signed in. Login or sign up in order to post.