如何將陰影添加到<rect>

我試圖以最簡單的方式將陰影效果添加到<rect>元素。我嘗試了一系列不同的過濾器和CSS屬性，但它不起作用。如何將陰影添加到<rect>

<svg width="960" height="500"> 
    <rect width="170" height="100" stroke-width="0" transform="translate(250,100)"></rect> 
</svg>

CSS：

rect { 
    fill: orange; 
    box-shadow: 2px 2px 2px #666; 
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
}

的作品是與SVG過濾器偏移和模糊，但這是做到這一點的唯一途徑的唯一的事？

來源

2013-12-07 Mahoni

我懷疑你寫錯了css Ref：http://www.w3schools.com/svg/svg_feoffset.asp –

好，另一種簡單的方法來創建陰影將令，坐在其背後的對象的副本，稍微偏移並以不同的顏色：

<rect width="170" height="100" stroke-width="0" 
     transform="translate(255,105)" class="shadow"></rect> 

rect.shadow { 
    fill: black; 
}

注意，.shadow RECT將有在之前定義之前的正常值，以便它在下面分層。

來源

2013-12-07 23:21:57 duskwuff

如何將陰影添加到<rect>

回答

相關問題