javascript - SVG 将圆形转换为简单的直线

Question

我正在尝试为一个简单的 SVG 圆圈(白色背景或任何其他颜色)制作动画，以便当您将鼠标悬停在它上面时，它会变成一条简单的垂直线(换句话说，它会变平成一条线)并在鼠标上out，好吧，然后它又变成了一个圆圈。

但是我找不到太多关于如何处理它的信息...任何帮助都将不胜感激!

Answer 1

使用缩放的动画示例

<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>