Каким образом реализовать закрашивание svg, при фокусировании на input'e?

Question

[game802]

Добрый день уважаемые знатоки! Имеется вот такая вот структура документа:

<div class="inner-addon left-addon">
    <svg class="user-login" height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.93 23.92"><defs><style>.user-login{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><g><path class="user-login" d="M10.46,23.41c3.33,0,5.65,0,9,0,.73,0,1-.14,1-1-.08-1.21,0-2.44,0-3.66a4.42,4.42,0,0,0-1.54-3.62,12.39,12.39,0,0,0-2.82-1.86c-2.93-1.33-5.12-2-8.19-1.12a11.6,11.6,0,0,0-4.93,2.2A5.21,5.21,0,0,0,.51,19.13a33.12,33.12,0,0,1,0,3.41c0,.71.22.89.9.88C4.76,23.39,7.1,23.41,10.46,23.41Z"/><path class="user-login" d="M16.09,6.23A5.61,5.61,0,0,0,10.44.5,5.62,5.62,0,0,0,4.75,6.19a5.6,5.6,0,0,0,5.7,5.68A5.59,5.59,0,0,0,16.09,6.23Z"/></g></svg>
    <input type="text" class="form-control" placeholder="Имя">
</div>

Каким образом сделать так, чтобы при фокусировке (:focus) на input'e, у меня перекрашивалась обводка svg (stroke)
Я уже дошел до маразма и додумался до что-то вроде этого

.form-control:focus,
.form-control:focus < svg.user-login,
.form-control:focus < svg.user-location {
    stroke: #009688;
    border-color: #009688;
}

Понимаю, что такого не существует, но я бы с удовольствием предложил такую идею для реализации :D. Шутка. Теперь о серьезном: как реализовать такую штуку? Может быть уже есть подобные решения данного вопроса? Спасибо за любую помощь и содействие в решении данного вопроса!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

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

.form-control:focus < svg.user-login

работал бы только если бы svg был вложен в .form-control, а так не бывает, значит надо цепляться за событие на общем родителе .inner-addon или через js навешивать класс
css:

.inner-addon:hover svg {
fill:#000;
}

js:

$('input').on('click',function(){
$(this).siblings("svg").css('fill','#000');
});

Comments

[Archakov Dennis]

о боже... Использовать jQuery ради того, чтобы закрасить SVG. Да и еще пытаться закрасить сам элемент SVG, а не path :|

Сурово-сурово...

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

Im Archakov: да это пример

Answer 2

[Archakov Dennis]

Тык . Уже отвечал на такой вопрос, смотрите решение там.

UPD: Недочитал вопрос в конце. Делайте закрашивание не SVG, а внутри лежащего элемента path

Вот пример. https://jsfiddle.net/c6bcgykh/

Чтобы способ заработал, надо SVG поместить после input

Comments

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

тут с svg все в порядке. Тут человек хочет зацепиться за focus одного элемента, а изменить свойства элемента лежащего на том же уровне.

[game802]

Максим Тимофеев: Вы совершенно правы, мне нужно было решение данного примера.