html - SVG color hover - can't find any solution -

for days i've been trying solve this, want make color change @ hover on svg (with css), i've found lots of tutorials (in , out of stack) none of them working me.

can tell me can do? svg code:

    <?xml version="1.0" encoding="utf-8"?> <!-- generator: adobe illustrator 19.1.0, svg export plug-in . svg version: 6.00 build 0)  --> <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"      viewbox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve"> <style type="text/css">     .st0{fill:#ffffff;} </style> <path id="svgbutton" d="m-328,271.1c-127,0-229.9,102.9-229.9,229.9s-455,730.9-328,730.9s-98.1,628-98.1,501s-201,271.1-328,271.1z m-139.2,580.8     c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1     c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0     l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6     c-123.1,528.7-128.5,555.5-139.2,580.8z"/> <g>     <path class="st0" d="m192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175         c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175         c320.3,722.8,258.1,748.5,192,748.5z m192,278.5c69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5         c122.7,0,222.5-99.8,222.5-222.5c414.5,378.3,314.7,278.5,192,278.5z"/> </g> <g>     <path class="st0" d="m192,604.5l67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3         c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3l192,604.5z"/> </g> </svg> 

i tried associate svg id="svgbutton", don't know if should put "img src" in html or on svg code itself.

anyway, tried these 2 , didn't work #svgbutton {fill:red} can pacient person explain me?

thank you! (and sorry bad english)

using .st0:hover allow change fill when white sections hovered on directly:

body {    background: black;  }    .st0 {    fill: #ffffff;  }    .st0:hover {    fill: red;  }

<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">  <path id="svgbutton" d="m-328,271.1c-127,0-229.9,102.9-229.9,229.9s-455,730.9-328,730.9s-98.1,628-98.1,501s-201,271.1-328,271.1z m-139.2,580.8      c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1      c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0      l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6      c-123.1,528.7-128.5,555.5-139.2,580.8z"/>  <g>      <path class="st0" d="m192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175          c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175          c320.3,722.8,258.1,748.5,192,748.5z m192,278.5c69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5          c122.7,0,222.5-99.8,222.5-222.5c414.5,378.3,314.7,278.5,192,278.5z"/>  </g>  <g>      <path class="st0" d="m192,604.5l67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3          c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3l192,604.5z"/>  </g>  </svg>

however, want change colour when inner black section hovered on well. in case, you're looking svg:hover .st0:

body {    background: black;  }    .st0 {    fill: #ffffff;  }    svg:hover .st0 {    fill: red;  }

<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">  <path id="svgbutton" d="m-328,271.1c-127,0-229.9,102.9-229.9,229.9s-455,730.9-328,730.9s-98.1,628-98.1,501s-201,271.1-328,271.1z m-139.2,580.8      c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1      c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0      l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6      c-123.1,528.7-128.5,555.5-139.2,580.8z"/>  <g>      <path class="st0" d="m192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175          c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175          c320.3,722.8,258.1,748.5,192,748.5z m192,278.5c69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5          c122.7,0,222.5-99.8,222.5-222.5c414.5,378.3,314.7,278.5,192,278.5z"/>  </g>  <g>      <path class="st0" d="m192,604.5l67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3          c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3l192,604.5z"/>  </g>  </svg>

hope helps! :)