CSS实现SVG对勾动画时stroke相关属性无效果求助

你写的stroke系列属性没有产生视觉变化，核心有3个直接阻断生效的问题：

• 缺少描边生效的基础属性：SVG路径默认stroke: none（无描边），你只配置了stroke-dasharray、stroke-dashoffset这类依赖「存在可见描边」才生效的衍生属性，相当于在完全透明的层上做虚线偏移，自然看不到任何效果。你之前使用fill属性一切正常，是因为fill的默认值不是none，和你设置的样式不冲突，才会出现“fill能用、stroke相关属性全失效”的错觉。
• 实心填充遮挡描边内容：你给#circle设置了fill: red，这个填充区域会占据路径内部空间，哪怕后续加上了有效描边，实心填充也会打乱描边动画的视觉呈现。
• 破折参数与路径实际长度不匹配：你写死的stroke-dasharray: 1000远大于你SVG路径的实际周长，当前viewBox下的环形路径实际周长仅约188，参数偏差过大会导致动画全程要么显示整条线、要么完全不显示，看不到平滑的描边绘制过程。

调整后的CSS部分：

* {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.container svg {
    width: 50%;
}

#circle, .mark {
    /* 必加：为所有需要做描边动画的路径配置可见的描边样式 */
    stroke: #2563eb;
    stroke-width: 2;
    /* 移除原有实心填充，避免遮挡描边 */
    fill: none;
    /* 匹配路径实际长度配置破折参数 */
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: strokeAnim 1.5s ease-out forwards;
}

/* 为对勾路径单独设置参数和延迟，实现先绘制外圈圆环、再绘制内部对勾的动效 */
.mark {
    animation-delay: 0.3s;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

@keyframes strokeAnim {
    to {
        stroke-dashoffset: 0;
    }
}

实用技巧：如果不确定自己SVG路径的实际周长，可以在浏览器控制台选中对应路径元素，调用原生方法path.getTotalLength()，返回的数值就是配置stroke-dasharray最准确的参考值，不需要靠猜测填大数值。

内容的提问来源于stack exchange，提问作者Louis Leonardo