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