[解決済み】css3を使ったSVGドロップシャドウ

質問

css3を使用して、svg要素にドロップシャドウを設定することは可能でしょうか？

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

フィルター効果で影を作るという発言を見かけました。CSSだけで作る例はないのでしょうか？以下は、cusor styleが正しく適用されている作業コードですが、シャドウ効果はありません。最小限のコードでシャドウ効果を得るために、どうか私を助けてください。

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">	
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

解決方法は？

ここに 例 filter' プロパティを使って、ある SVG にドロップシャドウを適用しています。ドロップシャドウの不透明度を制御したい場合は、次のサイトを参照してください。 この例 . その slope 属性は、ドロップシャドウに与える不透明度の大きさを制御します。

例題の関連部分です。

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Box-shadow は CSS のボックス（矩形と読みます）に対して動作するように定義されていますが、svg は矩形だけでなくもう少し表現力が豊かです。を読んでください。 SVG入門 SVGフィルターで何ができるのか、もう少し詳しく知りたい方はこちら。