<div class="square">
    <svg width="100%" height="100%">
      <rect class="box" display="inline" width="100%" height="100%"/>
      <circle cx="50%" cy="50%" r="40%"/>
    </svg>
  </div>

.square {
  display: inline-block;
  margin: 10px;
  width:150px; 
  height:150px; 
  text-align:center;
}
svg * {
  transition: all .5s ease-in-out;
}
svg circle {
  fill: red;
}
svg:hover circle { /* Any circle if any of the svg is hovered */
  fill: green;
}
.box {
  fill: blue;
}
.box:hover { /* The class .box only when that element is hovered */
  fill: yellow;
}