How do I transform polygon into rect on hover?

How do I transform polygon into rect on hover?

I would like to create an interactive map of the USA. Whenever a user puts
their mouse over a state, I would like the polygon to transform into a
hovering rectangle filled with information that the user can click. Would
I need to create a rect that is normally invisible until a mouse hovers
over it or is there another way to go about this?
<polygon
points="19,133 81,152 67,210 132,309 134,319 134,330 127,340 126,350
81,348 79,339 79,329 69,322 60,310 46,299
35,296 37,285 24,256 22,247 27,239 20,234 20,226 20,221 19,214 9,195
8,183 8,172 8,166 13,162 15,140"/>
<rect x="33" y="220" rx="20" ry="20" width="250" height="150">
<animateTransform attributeName="x" from="10" to="200" dur="3s"
fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="0"
to="1" dur="3s"/>
</rect>