SVG陰影 - 不透明度，feOffset和viewBox難度

我想將簡單陰影應用於SVG文件。因爲這真的是我第一次深入瞭解SVG過濾器，所以我陷入困境並找不到解決方案（可能很簡單）：爲什麼feColorMatrix不適用於該影子？SVG陰影 - 不透明度，feOffset和viewBox難度

這裏是過濾器：

<defs> 
    <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120"> 
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" /> 
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix" 
     values="0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 0.1 0"/> 
    <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/> 
    </filter> 
</defs>

而且，是有可能，火狐忽略feOffset？或者語法有問題嗎？

另外：在所有的瀏覽器中，陰影似乎在頂部和左側被剪掉。 SVG的（在img標籤）是的22px 178x22像素大，我已經擴大了viewBox：

<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
    y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 
xml:space="preserve">

但仍沒有運氣。在我的CSS文件中，img沒有設置寬度或高度，所以我認爲它與SVG有關。

來源

2013-02-01 Sven

1）您的過濾器區域可能太小。您可以放大默認值（雖然默認值：（-10％，-10％，120％，120％）對於正常陰影通常是足夠的。）

2）另外 - 正如Robert提到的 - 過濾器未正確連接。

這是一個似乎一貫地跨瀏覽器工作的版本 - 誇張，所以你可以清楚地看到。

<filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%"> 
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" /> 
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix" 
     values="0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 .5 0"/> 
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/> 
    </filter> 
</defs>

來源

2013-02-01 17:48:32

啊哇涼快，謝謝！我現在完全明白爲什麼它不起作用。 – Sven

您的feBlend不會輸出顯示爲feColorMatrix的輸出，它將輸出feOffset，因此忽略feColorMatrix。

來源

2013-02-01 17:47:16

SVG陰影 - 不透明度，feOffset和viewBox難度

回答

相關問題