stroke-dasharray

Tue, Nov 26, 2019

路径绘制动画

css

@keyframes line {
    from {
        stroke-dasharray: 0 10000;
    }
    to {
        stroke-dasharray: 400 10000;
    }
}

.svg-dasharray {
    animation: 1.5s infinite line;
}

html

<svg xmlns="http://www.w3.org/svg/2000" width="120" height="120" class="svg-dasharray" viewBox="0 0 110 110">
    <path  d="M 10 10 h 100 v 100 h -100 z"  stroke-width="2" fill="none" stroke="black" />
</svg>

示例