如何控制SVG陰影的顏色？

我有以下SVG：如何控制SVG陰影的顏色？

<defs> 
    <filter id="dropshadow"> 
     <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2"></feOffset> 
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussianBlur> 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend> 
    </filter> 
</defs>

如何，不過，我會改變它添加到控制陰影的顏色的能力嗎？

來源

2016-10-27 Richard

您可以使用feColorMatrix元素。嘗試嘗試使用values屬性中的數字。

<svg width="100%" height="300px"> 
 
<defs> 
 
    <filter id="dropshadow" width="130%" height="130%"> 
 
     <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5"></feOffset> 
 
     <feColorMatrix result="matrixOut" in="offOut" type="matrix" 
 
     values="0.2 0 0 0 0 0 0.2 0 0 1 0 0 0.2 0 0 0 0 0 1 0" /> 
 
     <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2"></feGaussianBlur> 
 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend> 
 
    </filter> 
 
</defs> 
 
    <rect x="20" y="20" width="50" height="50" fill="red" filter="url(#dropshadow)"></rect> 
 
</svg>

來源

2016-10-27 19:11:09

無法在Chrome MSIE（11）和FF中使用它。。我在我的SVG代碼中有： – Richard

答案中的代碼片段肯定適用於FF，因爲這是我用來創建和測試的。在Chrome中似乎也可以，那裏還有淡綠色的影子。請注意還有其他變化，例如你的feOffset中的SourceAlpha是我的SourceGraphic。 –

謝謝。現在路徑標記有陰影，但似乎從路徑標記中獲取顏色。下面是一張圖片：http://www.rgraph.net/tests/svg-shadow-blur.png – Richard

你應該使用在feColorMatrix固定偏列指定一個確切的顏色。具體來說，如果你想，例如，RGB（128,128,0），那麼你將它轉換爲單位比例（0.5,0.5,0），並將其放在你的顏色矩陣的第五列。在sRGB色彩空間中指定它也很重要。

<defs> 
    <filter id="dropshadow" color-interpolation-filters="sRGB"> 
     <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2"/> 
     <feColorMatrix in="offOut" result ="matrixOut" type="matrix"       
            values="0 0 0 0 0.5 
              0 0 0 0 0.5 
              0 0 0 0 0 
              0 0 0 1 0" /> 
     <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2"/> 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> 
    </filter> 
</defs>

來源

2016-10-28 00:31:59

如何控制SVG陰影的顏色？

回答

相關問題