hovering onto image.gif and automatically drawing a svg path

Hi i need to be able to hover over a particular image.gif and draw a svg path around a certain area of that image.



For example if i had a house with bedrooms and a kitchen in it. When the user moves the mouse inside the bedroom area it outlines the bedroom with a path. So it traces the outline of
the room. But if i take the mouse pointer outside into a different area such as teh kitchen the path dissapears.

Im not worried about how the path looks. A simple rectangle path will be fine. But just the functionality of how the mouse hovers into the area and draws the path shape automatically.

Could someone please help me do this i need help bad..

Thanks :D

You can use set attribute on stroke to show / hide rectangle.
In this example, I add dashed line turning around area when pointer is on rectangle
You can remove stroke-dasharray, stroke-dashoffset and animate attribute

<rect x="20" y="20" width="100" height="100" fill="none" stroke-width="2" stroke-dasharray="5 5" stroke-dashoffset="0" stroke="none" pointer-events="visible">
<set attributeName="stroke" to="red" begin="mouseover" end="mouseout"/>
<animate attributeName="stroke-dashoffset" values="0;10" begin="mouseover" dur="0.5" repeatCount="indefinite"/>
</rect>

Michel

thanks that helped allot thankyou very much!