SVG制作内阴影

1、在css中可以通过 box-shadow: inset 0 0 8px #f00 的方式去设置内阴影
2、在svg中应该怎么实现呢？这就不得不说svg中的滤镜功能，这里只谈内阴影的制作，至于其他的滤镜请自行百度搜索学习。

下面直接看代码：

<svg>
    <filter id="innershadow" x0="-50%" y0="-50%" width="200%" height="200%">
        <feComponentTransfer in="SourceAlpha">
            <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feGaussianBlur stdDeviation="4" />
        <feOffset dx="0" dy="0" result="offsetblur" />
        <feFlood floodColor="#7059ef" floodOpacity="1" result="color" />
        <feComposite in2="offsetblur" operator="in" />
        <feComposite in2="SourceAlpha" operator="in" />
        <feMerge>
            <feMergeNode in="SourceGraphic" />
            <feMergeNode />
        </feMerge>
    </filter>
</svg>
//使用方式
<polygon id="leftpoly" filter="url(#innershadow)" className="polygon" />

详细的svg介绍可以看这里:
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

上面的代码就是一个完整的svg内阴影滤镜，下面对部分做一下简单的介绍

feComponentTransfer 调整亮度、对比度、色彩平衡 包括<feFuncR>, <feFuncB>, <feFuncG>, and <feFuncA>.

feGaussianBlur 高斯模糊

feOffset 整个阴影的偏移

feFlood 指定颜色和透明度