Tell me how to add a shadow to an svg image or to the basic svg shapes.
In the svg file itself.
Alexandr_TT
34.7k eleven 42 161
Oleg Ovcharenko Oleg Ovcharenko
402 five 20
- stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 - labris
- oneIf you need to add a shadow to a vector SVG file, then you need to use a graphical vector editor (for example, Illustrator). - labris
- @abris is easier to add to the svg file via code, and not to draw in the editor - Alexandr_TT
|
1 answer
One way to get a shadow inside an svg file is to add an svg filter.
<svg width="50%" height="50%" viewBox="0 0 250 250"> <defs> <filter id="drop-shadow" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> <feOffset in="blur" dx="3" dy="3" result="offsetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <rect class="rect1" x="5" y="5" width="50" height="50" fill="greenyellow" filter="url(#drop-shadow)" /> <circle cx="100" cy="100" r="50" fill="purple" filter="url(#drop-shadow)" /> <svg> Alexandr_TT Alexandr_TT
34.7k eleven 42 161
|