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>
<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
指定颜色和透明度