svg : feDropShadow 阴影滤镜

马黑黑

feDropShadow 滤镜创建输入图像的阴影。内置属性 dx、dy 分别表示水平方向和垂直方向的阴影偏移量，支持阴影模糊（stdDeviation），支持定义阴影颜色（flood-color）和阴影不透明度（flood-opacity），本质上和 CSS 的 drop-shadow 滤镜原理差不多。feDropShadow 语法：

<feDropShadow dx="水平偏移值" dy="垂直偏移值" stdDeviation="模糊度" flood-color="阴影颜色" flood-opacity="不透明度" />

下面，我们设置了三个滤镜组，分别作用于三个矩形：

代码：

<svg width="590" height="200">
	<filter id="shadow1">
		<feDropShadow dx="8" dy="8" stdDeviation="2" flood-color="#000" flood-opacity="0.9" />
	</filter>
	<filter id="shadow2">
		<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="green" flood-opacity="1" />
	</filter>
	<filter id="shadow3">
		<feDropShadow dx="-6" dy="-4" stdDeviation="4" flood-color="#000" flood-opacity="0.85" />
	</filter>
	<rect x="20" y="20" width="160" height="160" fill="olive" filter="url(#shadow1)" />
	<rect x="220" y="20" width="160" height="160" fill="olive" filter="url(#shadow2)" />
	<rect x="410" y="20" width="160" height="160" fill="olive" filter="url(#shadow3)" />
</svg>

代码解析：

三个 filter 标签：每一个都有自己的 id 标识、内含一个 feDropShadow 滤镜，feDropShadow 滤镜的各属性值不尽一致。三个矩形 rect 标签：通过 filter 属性各绑定一个滤镜 id，将滤镜效果引用到自己身上。

【附】实体元素绑定滤镜的方法，还可以通过 CSS 设定，也是使用 filter 属性，试比较两种表达法的异同：

svg标签属性：filter="url(#shadow1)" ...
CSS样式属性: filter: url(#shadow1);

红影

终于讲到专门的阴影内容了，记得上次用高斯模糊加偏移做阴影时，你就说过有专门的阴影内容。
这个好，可以设置颜色和不透明度，让阴影更细致了

红影

flood-color=""和flood-opacity=""和feFlood里的一样呢吗，怪不得看着眼熟，stdDeviation=""的模糊度也和前面的单词一样

红影

用三个图图展示了各方向偏移和透明度及颜色影响，比较着学习真好

红影

第一个和第三个，不透明度只相差0.5, ，感觉却完全不同呢。

马黑黑

红影 发表于 2023-10-15 10:07
第一个和第三个，不透明度只相差0.5, ，感觉却完全不同呢。

模糊度也是个重要因子

马黑黑

红影 发表于 2023-10-15 10:02
flood-color=""和flood-opacity=""和feFlood里的一样呢吗，怪不得看着眼熟，stdDeviation=""的模糊度也和前 ...

阴影讲究几个因素：偏移量、模糊度、颜色、透明度，所以，该有的都有

红影

马黑黑 发表于 2023-10-15 22:09
模糊度也是个重要因子

这里的模糊度的差异感觉特别明显。

红影

马黑黑 发表于 2023-10-15 22:10
阴影讲究几个因素：偏移量、模糊度、颜色、透明度，所以，该有的都有

还好着几样都是原来的参数名，不是其他的名

马黑黑

红影 发表于 2023-10-15 22:43
还好着几样都是原来的参数名，不是其他的名

对，都是所需的参数

马黑黑

红影 发表于 2023-10-15 22:42
这里的模糊度的差异感觉特别明显。

是的

红影

马黑黑 发表于 2023-10-16 17:30
对，都是所需的参数

这就不用另外去记了，只要看熟它们就行了

红影

马黑黑 发表于 2023-10-16 17:30
是的

以前从来不知道只差0.5 感官上会差这么多。

马黑黑

红影 发表于 2023-10-16 22:36
以前从来不知道只差0.5 感官上会差这么多。

数字就是数字，一点点的差别，有时候是天差地别

马黑黑

红影 发表于 2023-10-16 22:36
这就不用另外去记了，只要看熟它们就行了

忘了查查文档

红影

马黑黑 发表于 2023-10-17 00:08
数字就是数字，一点点的差别，有时候是天差地别

在柏林噪声里也感受到了，零点几的差别也是图形不同。

红影

马黑黑 发表于 2023-10-17 00:08
忘了查查文档

饿呢，这个肯定需要的，很多时候就算知道含义，也记不住那些词汇。

马黑黑

红影 发表于 2023-10-17 20:32
饿呢，这个肯定需要的，很多时候就算知道含义，也记不住那些词汇。

还有，它到底有什么参数、这些参数如何设置，用的时候查查总是对的

马黑黑

红影 发表于 2023-10-17 20:31
在柏林噪声里也感受到了，零点几的差别也是图形不同。

对，基本都会有区别的

红影

马黑黑 发表于 2023-10-18 13:07
还有，它到底有什么参数、这些参数如何设置，用的时候查查总是对的

对我来说没本事去用，大都是复习的时候回头查查