"stroke" css 属性在我的 svg 中不起作用

Question

实际上，我是使用 css 制作 svg 动画的新手，我想制作我的 svg 动画，就像检查标记的动画一样，但我发现 youtube 中很多人使用“stroke”css 属性，但它并没有对我的 svg 做任何改变，但是当我将颜色填充到我的 svg

时它仍然很好

这是代码

* {
    padding: 0;
    margin: 0;
}

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

.container svg {
    width: 50%;
}

#circle {
    fill: red;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: animating 2s ease-out;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 90 112.5" x="0px" y="0px">
            <path d="M45,77A32,32,0,1,1,77,45,32.036,32.036,0,0,1,45,77Zm0-62A30,30,0,1,0,75,45,30.034,30.034,0,0,0,45,15Z" id="circle"/>
            <path d="M40.5,53.5a1,1,0,0,1-.707-.293l-6-6a1,1,0,0,1,1.414-1.414L40.5,51.086,53.793,37.793a1,1,0,0,1,1.414,1.414l-14,14A1,1,0,0,1,40.5,53.5Z" class="mark"/>
        </svg>
    </div>
</body>
</html>

Answer 1

你的圆不是真正的圆，这个形状是空心的圆，你看到的stroke实际上是fill，不可能使用 stroke-dashoffset.

制作动画

<path d="M45,77A32,32,0,1,1,77,45,32.036,32.036,0,0,1,45,77Zm0-62A30,30,0,1,0,75,45,30.034,30.034,0,0,0,45,15Z" id="circle"/>

您应该使用真实的 circle 形状，然后能够像这样对其 stroke-dashoffset 进行动画处理：

<circle r="25" cx="45" cy="45" id="circle"/>

* {
    padding: 0;
    margin: 0;
}

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

.container svg {
    width: 50%;
}

#circle {
    fill: none;
    stroke: red;
    stroke-width: 2;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: animating 3s ease-out both;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 90 112.5" x="0px" y="0px">
            <!--<path d="M45,77A32,32,0,1,1,77,45,32.036,32.036,0,0,1,45,77Zm0-62A30,30,0,1,0,75,45,30.034,30.034,0,0,0,45,15Z" id="circle"/>-->
            <!-- Use a real circle -->
            <circle r="25" cx="45" cy="45" id="circle"/>
            <path d="M40.5,53.5a1,1,0,0,1-.707-.293l-6-6a1,1,0,0,1,1.414-1.414L40.5,51.086,53.793,37.793a1,1,0,0,1,1.414,1.414l-14,14A1,1,0,0,1,40.5,53.5Z" class="mark"/>
        </svg>
    </div>
</body>
</html>

"stroke" css 属性在我的 svg 中不起作用

"stroke" css property is not working in my svg

html

css

svg

svg-animate

"stroke" css 属性 在我的 svg 中不起作用

"stroke" css property is not working in my svg

html

css

svg

svg-animate

"stroke" css 属性在我的 svg 中不起作用