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

Question

我正在尝试制作一个简单的 SVG 圆圈（白色背景或任何其他颜色）的动画，这样当您将鼠标悬停在它上面时，它就会变成一条简单的垂直线（换句话说，它会变平成一条线）并且鼠标移开，然后它再次动画成一个圆圈。

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

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>