SVG transform circle into simple line

Question

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle again.

Yet I can't find much information on how to approach it... Any and every help will be greatly appreciated!

Answer 1

An example of the animation using scale

<svg width="500" height="150">
    <circle cx="60" cy="60" r="40" style="stroke:#006600; fill:#00cc00" >
            <animateTransform 
            attributeName="transform"
            begin="0s"
            dur="2s"
            type="scale"
            from="1 1"
            to="1 0.01"
    repeatCount="indefinite"
        />
</circle>
</svg>