hovering onto image.gif and automatically drawing a svg path
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 |