2

svg（IE7 / 8互換のvml）で作成された形状の下、またはhtml5のキャンバスで作成された形状の下にドロップシャドウを作成するのは簡単ですか？ドロップシャドウ付きの矢印を作成しようとしています。

4

1 に答える 1

6

ドロップシャドウを取得する方法を示す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. <filter>定義（svgフィルターは単なるドロップシャドウ以上のことを行うことができます）
  2. フィルタを使用するにはurl(#id)、CSS'filter'プロパティを介した構文フィルタ、または上記の例のようにプレゼンテーション属性で参照します。
于 2011-03-17T10:13:44.073 に答える