CODEWITHSUNDEEP
htmlcsssvgsvg-animate
Louis Leonardo
Louis Leonardo

Reputation: 25

"stroke" css property is not working in my svg

actually i'm new at animating svg with css, i want to animate my svg like check marked animation, but i find that many people in youtube use "stroke" css property, but it doesn't make any change to my svg, but it still fine when i filled the color to my svg

here is the code

* {
    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>

Upvotes: 2

Views: 2031

Answers (1)

Hao Wu
Hao Wu

Reputation: 20669

Your circle is not an actual circle, this shape is a hollowed circle and the stroke you see is actually the fill, which cannot be animated using 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"/>

You should use a real circle shape and then be able to animate its stroke-dashoffset like this:

<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>

Upvotes: 2

Related Questions