如何自画一条简单的线条

Question

如何以慢动作绘制以下行？我有很多关于动画路径的演示和教程。但是，我试图创建一条慢慢吸引自己的线。

<svg height="200" width="200">
    <line x1="10" y1="10 x2="30' y2="10" />
</svg>

EDIT 这是我找到的解决方案

    #path {
        stroke: #000;
        stroke-width: 1;
        stroke-dasharray: 300px;
        stroke-dashoffset: 300px;
        animation-name: draw;
        animation-duration: 5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: linear;
    }
    @keyframes draw{
        to {
            stroke-dashoffset: 0;
        }
    }


    <line id="path" x1="300" y1="120" x2="300" y2="350" stroke="#000" stroke-width="1" 
        stroke-dasharray="300px" stroke-dashoffset="300" />