一、 简单示例

通过以下三个方式，组合实现投影效果

• feOffset偏移（SourceAlpha在Alpha通道使用残影，而不是整个RGBA像素）
• feGaussianBlur高斯模糊
• feBlend混合模式

可以理解in为使用，result为导出

stdDeviation：standard deviation 标准偏差
dx：dirty x

<svg>
    <defs>
        <filter x="0" y="0">
            <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <path filter="url(#filter1)" d="m32.47594,49.75001l-21.72594,-39.00001l39.06394,39.00001l-39.06394,38.99999l21.72594,-38.99999z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff" />
</svg>

二、使用颜色矩阵

• feColorMatrix颜色矩阵

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
            <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <path filter="url(#f1)" d="m32.47594,49.75001l-21.72594,-39.00001l39.06394,39.00001l-39.06394,38.99999l21.72594,-38.99999z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff" />
</svg>