“stroke”css 属性在我的 svg 中不起作用答案

【问题标题】："stroke" css property is not working in my svg“stroke”css 属性在我的 svg 中不起作用
【发布时间】：2021-05-19 00:05:41
【问题描述】：

实际上我是使用 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>

【问题讨论】：

标签： html css svg svg-animate

【解决方案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”属性对路径元素不起作用？我说的对吗？
@LouisLeonardo 我直接在path 上尝试了stroke，它显示了两个同心圆。此外，path 的圆圈不应该那么长，大多数情况下您只需要 d 属性中的 4 个节点。