Question

Is it easy to create drop shadows under shapes created with svg (vml for IE7/8 compatibility) or under shapes created with html5’s canvas? I’m looking to create an arrow with a drop shadow.

Answer 1

Here’s an svg example showing how to get a dropshadow:

  <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
  <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="#EEEEEE" filter="url(#dropshadow)"/>

The important bits are:

1. The <filter> definition (svg filters can do a lot more than just dropshadows)
2. To use the filter, reference it by the url(#id) syntax filter via the CSS ‘filter’ property, or presentation attribute as in the example above