A
A
Archakov Dennis2016-08-13 01:00:33
css
Archakov Dennis, 2016-08-13 01:00:33

How to implement shadow for SVG Path?

I started to make animation for SVG maps and I need to make a shadow :hoverfor one of the regions. It is necessary to raise the region just above and below the region to display the shadow.
Something like this:
71146e23532847e8bd728844ac1608b9.png
Map in JSFiddle . I can't make a shadow exactly on<path>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Azim Kurt, 2016-08-13
@archakov06

Use JS to go through all the paths and insert the active pathone at the end, otherwise there will be no “lifting” effect.
This is the shadow filter:

<svg>
  <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="10" dy="10" />
      <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
      </feMerge>
  </filter>
</svg>

This is the css on :hover:
svg path:hover {
  transform: translate(-10px,-10px);
  filter: url(#dropShadow);
  transition: transform .1s;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question