SVG制作内阴影

作者: zengde 分类: web前端 发布时间: 2020-09-15 06:09

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

下面直接看代码:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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> <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>
    <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 指定颜色和透明度

zengde个人的小站