Блог

Главная - Вопросы по программированию - Штрих анимации SVG-Dasharray

Штрих анимации SVG-Dasharray

#css #svg #stroke-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>

Ответ №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>
Метки: