如何控制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阴影的颜色？

回答

相关问题