在 svg/vml 或画布形状周围放置阴影

Question

在使用 svg（兼容 IE7/8 的 vml）创建的形状下或在使用 html5 的画布创建的形状下创建阴影是否容易？我正在寻找创建一个带有阴影的箭头。

Answer 1

这是一个 svg 示例，展示了如何获取投影：

  <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)"/>

重要的部分是：

1. 定义（svg 过滤器 可以做更多事情不仅仅是 dropshadows）
2. 要使用过滤器，请通过 CSS 'filter' 属性或presentation 属性通过 url(#id) 语法过滤器引用它，如上例所示