html5 - Drop shadows around svg/vml or canvas shapes -


It is easy to create a drop shadow under the shape created with svg (VML for IE7 / 8 compatibility) or HTML5 Made with canvas down the size? I'm looking to make an arrow with a drop shadow.

Here is a perfect display to get a dropshadow:

  & Lt; Defs & gt; & Lt; Filter id = "drop shad" height = "130%" & gt; & Lt; In = "SourceAlpha" stdDeviation = "3" / & gt feGaussianBlur; & Lt; feOffset dx = "2" dy = "2" results = "Ofsetblur" / & gt; & Lt; FeMerge & gt; & Lt; FeMergeNode / & gt; & Lt; FeMergeNode in = "SourceGraphic" /> & Lt; / FeMerge & gt; & Lt; / Filter & gt; & Lt; / Defs & gt; & Lt; Polygon points = fill "58k263,0k056 L00,4lk85 58k263,83k64l 30k662,83k64l 62k438,5lk866 0,5lk866 0,3lk6ll 62k2l3,3lk6ll 30k605,0 58k263,0k056" = "# Eeeeee" filter = "url (#dropshadow)" />   

The important bits:

  1. & lt; Filter & gt; Definition (just can do too much in comparison with dropshadows)
  2. To use the filter, by reference to URL (#ID) it above as an example, through the 'filter' property, or presentation attribute

Comments