Как изменить длину svg при клике?

Question

[spacekk]

Стрелка в формате svg, как при hover и click заставить ее "растягиваться" как на примере ниже?



код стрелки

<svg width="51" height="16" viewBox="0 0 51 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7071 0.707107C51.0976 0.316583 51.0976 -0.316583 50.7071 -0.707107L44.3431 -7.07107C43.9526 -7.46159 43.3195 -7.46159 42.9289 -7.07107C42.5384 -6.68054 42.5384 -6.04738 42.9289 -5.65685L48.5858 0L42.9289 5.65685C42.5384 6.04738 42.5384 6.68054 42.9289 7.07107C43.3195 7.46159 43.9526 7.46159 44.3431 7.07107L50.7071 0.707107ZM0 1H50V-1H0V1Z" transform="translate(0 8)" fill="#404040"/>
</svg>

Answer 1

[Александр]

ну тут 2 варианта:
1) скрыть пол блока за экраном, а при наведении или клике выдвигать его
2) задать его ширину в стилях и увеличивать эту ширину

Answer 2

[Максим Тимофеев]

Сделать 2 элемента. 1 стрелка, она просто двигаться будет. Второй линия, она будет увеличиваться. Ибо перерасчитывать path не вариант, а трансформации изменят aspectRatio

Comments

[spacekk]

а как наложение в два слоя сделать? у меня они друг за другом выстраиваются.

<svg width="51" height="16" viewBox="0 0 51 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7071 0.707107C51.0976 0.316583 51.0976 -0.316583 50.7071 -0.707107L44.3431 -7.07107C43.9526 -7.46159 43.3195 -7.46159 42.9289 -7.07107C42.5384 -6.68054 42.5384 -6.04738 42.9289 -5.65685L48.5858 0L42.9289 5.65685C42.5384 6.04738 42.5384 6.68054 42.9289 7.07107C43.3195 7.46159 43.9526 7.46159 44.3431 7.07107L50.7071 0.707107ZM0 1H50V-1H0V1Z" transform="translate(0 8)" fill="#404040"/>
</svg>
<svg width="40" height="2" viewBox="0 0 40 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="-1" x2="40" y2="-1" transform="translate(0 2)" stroke="#404040" stroke-width="2"/>
</svg>

[Максим Тимофеев]

spacekk, а зачем вы два svg сделали? svg - 1, а в нем несколько элементов

[spacekk]

Максим Тимофеев, не понимаю, как это реализовать.

<svg width="51" height="16" viewBox="0 0 51 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.7071 0.707107C51.0976 0.316583 51.0976 -0.316583 50.7071 -0.707107L44.3431 -7.07107C43.9526 -7.46159 43.3195 -7.46159 42.9289 -7.07107C42.5384 -6.68054 42.5384 -6.04738 42.9289 -5.65685L48.5858 0L42.9289 5.65685C42.5384 6.04738 42.5384 6.68054 42.9289 7.07107C43.3195 7.46159 43.9526 7.46159 44.3431 7.07107L50.7071 0.707107ZM0 1H50V-1H0V1Z" transform="translate(0 8)" fill="#404040"/>

<line y1="-1" x2="40" y2="-1" transform="translate(0 2)" stroke="#404040" stroke-width="2"/>
</svg>

Стили такие:

svg{
	margin-top: 50px;
	transition: all 0.4s ease-in-out;
}
svg:hover{
	width:100px;
	fill:#fff;
		transition: all 0.4s ease-in-out;
}