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

Posted 2023-03-06

【中文标题】在 svg/vml 或画布形状周围放置阴影

【英文标题】：Drop shadows around svg/vml or canvas shapes

【发布时间】：2011-07-16 23:44:12

【问题描述】：

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

【参考方案1】：

这是一个svg example，展示了如何获得阴影：

  <defs>
    <filter id="dropshadow" >
      <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)"/>

重要的一点是：

<filter> 定义（svg filters 可以做的不仅仅是阴影） 要使用过滤器，请使用url(#id) 语法过滤器通过 CSS 'filter' 属性或上面示例中的表示属性来引用它