我需要制作一个带有内嵌阴影的盒子,就像 CSS3 具有内嵌盒子阴影一样。到目前为止我发现的是一个带有 feGaussianBlur 的滤镜,但问题是它还在框外添加了阴影,这是我不想要的。这是我到目前为止得到的代码:
<svg>
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
<feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
<feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
<feMerge>
<feMergeNode in="blur" mode="normal"/>
<feMergeNode in="blur2" mode="normal"/>
<feMergeNode in="blur3" mode="normal"/>
<feMergeNode in="SourceGraphic" mode="normal"/>
</feMerge>
</filter>
</defs>
<rect x="10" y="10" width="100" height="100"
stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>
我制作了一个 demo,它还将此代码与所需的 CSS 制作结果进行了比较。该过滤器不仅适用于矩形,还适用于梯形和更复杂的多边形。
我已经尝试过使用 RadialGradient,但由于这会使渐变变成圆形,所以这也不好。
如果你有实心填充,你可以添加
<feComposite operator="in" in2="SourceGraphic"/>
到滤镜的末尾,它会将模糊剪裁为 SourceGraphic 的形状。由于您的形状是透明的,因此您需要做更多的工作。我建议在原始图形上使用半透明填充,以便获得正确的合成选择,并使用 feFuncA 将最终操作的填充归零。事实证明这非常复杂。但这里有一个适用于任何实线形状的解决方案
<filter id="inset-shadow" >
<!-- dial up the opacity on the shape fill to "1" to select the full shape-->
<feComponentTransfer in="SourceAlpha" result="inset-selection">
<feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
</feComponentTransfer>
<!-- dial down the opacity on the shape fill to "0" to get rid of it -->
<feComponentTransfer in="SourceGraphic" result="original-no-fill">
<feFuncA type="discrete" tableValues="0 0 1"/>
</feComponentTransfer>
<!-- since you can't use the built in SourceAlpha generate your own -->
<feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"
/>
<feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
<feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
<feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
<feMerge result="blur">
<feMergeNode in="blur" mode="normal"/>
<feMergeNode in="blur2" mode="normal"/>
<feMergeNode in="blur3" mode="normal"/>
</feMerge>
<!-- select the portion of the blur that overlaps with your shape -->
<feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur"/>
<!-- composite the blur on top of the original with the fill removed -->
<feComposite operator="over" in="original-no-fill" in2="inset-blur"/>
</filter>
这是我的小提琴分支:http://jsfiddle.net/kkPM4/
很大程度上基于我发现的实验,这是我的想法:
<defs><filter id="inset-shadow">
<feOffset dx="10" dy="10"/> <!-- Shadow Offset -->
<feGaussianBlur stdDeviation="10" result="offset-blur"/> <!-- Shadow Blur -->
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
<feFlood flood-color="black" flood-opacity="1" result="color"/> <!-- Color & Opacity -->
<feComposite operator="in" in="color" in2="inverse" result="shadow"/> <!-- Clip color inside shadow -->
<feComponentTransfer in="shadow" result="shadow"> <!-- Shadow Opacity -->
<feFuncA type="linear" slope=".75"/>
</feComponentTransfer>
<!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>--> <!-- Put shadow over original object -->
</filter></defs>
<rect width="100" height="100" fill="yellow" filter="url(#inset-shadow)"/>
如果您希望看到填充,请取消注释最后一个
<feComposite>
。不幸的是,fill="transparent"
不会为滤镜提供可使用的 Alpha,并且不会产生阴影。
也许我们可以结合 ClipPath 和 GaussianBlur
<svg viewBox="0 0 100 100">
<defs>
<path id="p" d="M10,10 l40,20 l40,-20 v80 h-80 z" />
<filter id="f">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<clipPath id="c">
<use href="#p" />
</clipPath>
<use clip-path="url(#c)" href="#p" fill="transparent" stroke="red" filter="url(#f)" />
</svg>