Как задать тень для svg?

Question

[Alexander3928]

Добрый день! Как задать тень для svg иконки?

<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="#43a047" d="M1.00000001 7.71134025l3.83505154 3.8041237 8.16494844-8.16494844-.86597938-.86597938L4.83505155 9.7835052 1.86597939 6.81443303z"/></svg>

Такой вариант не работает

svg path:hover {
  transform: translate(-10px, -10px);
}

P.S. нету svg поставил. Сорри

Answer 1

[Сергей Т]

ты все верно делал только забыл сделать копию path, которая будет в качестве тени выступать, и в translate размеры меньше нужны

Comments

[Alexander3928]

Если я правильно понял, нужно создавать копию иконки?

[Сергей Т]

Alexander3928, да, у тебя внутри svg 2 копии path, один зеленый второй черный

тут есть описание нескольких способов и с использованием  svg фильтров:
https://ru.stackoverflow.com/questions/734846/%D0%...

[Alexander3928]

Сергей Т, У меня еще вопрос один. Я заметил что тень не добавляется если указать img src="путь к svg" вместо svg какой-то вектор svg. Это с чем может быть связанно?

Тут я думаю будет понятней

картинка без тени. Там просто путь до svg иконки


с тенями, но без ссылки на svg, а именно указанно в html

https://codepen.io/Alexxxsander/pen/ExozmML

[Сергей Т]

Alexander3928, не совсем понял, что вы хотели показать в примере на codepen, а если svg добавлять
через img, то он добавляется статичной картинкой и у нас нету доступа к его элементам