SVG动画描边-Dasharray

Question

我正在为更改 dasharray 偏移量的 svg 笔画设置动画。边框的两端是否可以动画，而不是左端是静态的，只有另一端移动和环绕？

我被迫在这里纠正更多的东西，让我知道是否清楚或者我是否需要以更好的方式解释我的需要。谢谢

<style>

    .wrapper{
        --height: 185px; 
        width: 300px;
        height: var(--height);
        background: rgba(255,255,255,0);
        margin: auto;
        position: relative;
    }
    
    .image, .image-border{
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 12px !important;
    }
    
    .image{
        max-width: 96% !important;
        top: 1.3%;
        left: 1.8%;
    }
    
    .image-border{
        width: 100%;
        top: -2.3px;
    }
    
    .image-border path{
        fill: none;
        stroke: #824ad8;
        stroke-width: 2.3px;
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        transition: 1s;
    }
    
    .wrapper:hover .image-border path{
        stroke-dashoffset: 0;
        stroke-dasharray: 320;
        /*stroke-width: 2.3px;*/
    }
    
</style>

<div class="wrapper">
    
    <img class="image" src="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/03/Screen-Shot-2021-02-12-at-10.48.49-AM.jpg" />
    
    <svg class="image-border" viewBox="0 0 103 65" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;">
        <path d="M1.146,4.244c-0,-1.71 1.388,-3.098 3.098,-3.098l93.804,-0c1.71,-0 3.098,1.388 3.098,3.098l-0,55.767c-0,1.71 -1.388,3.099 -3.098,3.099l-93.804,-0c-1.71,-0 -3.098,-1.389 -3.098,-3.099l-0,-55.767Z"/>
    </svg>
    
</div>

Answer 1

您必须更改 stroke-dasharray 使其比悬停在 0 长度孔时小两倍，和将其移动到初始位置同时使您的整个行程正确居中。

.image-border path{
    fill: none;
    stroke: #824ad8;
    stroke-width: 2.3px;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    transition: 1s;
}
.wrapper:hover .image-border path{
    stroke-dasharray: 160 0;
    stroke-dashoffset: 0;
}

.wrapper{
    --height: 185px; 
    width: 300px;
    height: var(--height);
    background: rgba(255,255,255,0);
    margin: auto;
    position: relative;
}

.image, .image-border{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px !important;
}

.image{
    max-width: 96% !important;
    top: 1.3%;
    left: 1.8%;
}

.image-border{
    width: 100%;
    top: -2.3px;
}

<div class="wrapper">
    
    <img class="image" src="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/03/Screen-Shot-2021-02-12-at-10.48.49-AM.jpg" />
    
    <svg class="image-border" viewBox="0 0 103 65" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;">
        <path d="M1.146,4.244c-0,-1.71 1.388,-3.098 3.098,-3.098l93.804,-0c1.71,-0 3.098,1.388 3.098,3.098l-0,55.767c-0,1.71 -1.388,3.099 -3.098,3.099l-93.804,-0c-1.71,-0 -3.098,-1.389 -3.098,-3.099l-0,-55.767Z"/>
    </svg>
    
</div>

SVG动画描边-Dasharray

SVG Animation Stroke-Dasharray

css

svg

stroke-dasharray