SVG pattern change color of hovered element

I have a background with SVG pattern and I only want change the color of the hovered item, not all.

I've tried to use :hover on my polygon tag but it doesn't work.

svg:hover pattern polygon{
  fill:red;
  -webkit-transition: padding 0s;
}

polygon{
  -webkit-transition: all 0.75s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
      <pattern id="stars" patternUnits="userSpaceOnUse" width="100" height="100">
        <polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="blue"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#stars)" />
  </svg>

</div>

Maybe I have to use JS but I don't know how. It's the first time I work with SVG, I've searched on the web but can't find anything helpful.