svg - 如何控制 SVG 阴影的颜色？

Question

我有以下 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>

但是，我该如何改变它以添加控制阴影颜色的能力？

Answer 1

您应该使用 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>