archakov06
@archakov06
Frontend-разработчик (ReactJS)

Как реализовать тень для SVG Path?

Начал делать анимацию для SVG карты и требуется сделать тень, при :hover на один из регионов. Надо поднимать регион чуть выше и ниже региона отображать тень.

Примерно так:
71146e23532847e8bd728844ac1608b9.png

Карта в JSFiddle. Не могу сделать тень именно на <path>
  • Вопрос задан
  • 8140 просмотров
Решения вопроса 2
Symphony
@Symphony Куратор тега CSS
JS-ом проходите по всем путям и вставляйте активный path в конце, а иначе эффекта «приподнятия» не будет.

Это фильтр тени:
<svg>
  <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="10" dy="10" />
      <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
      </feMerge>
  </filter>
</svg>


Это css при :hover:
svg path:hover {
  transform: translate(-10px,-10px);
  filter: url(#dropShadow);
  transition: transform .1s;
}
Ответ написан
Комментировать
LenovoId
@LenovoId Куратор тега SVG
svg, css,js
Это собственно реализация того что сказал Symphony : jsfiddle
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы