svg : feDropShadow 阴影滤镜
<style>.ma p { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
.ma > svg { border: 1px solid gray; }
</style>
<div class="ma">
<p>feDropShadow 滤镜创建输入图像的阴影。内置属性 dx、dy 分别表示水平方向和垂直方向的阴影偏移量，支持阴影模糊（stdDeviation），支持定义阴影颜色（flood-color）和阴影不透明度（flood-opacity），本质上和 CSS 的 drop-shadow 滤镜原理差不多。feDropShadow 语法：</p>
<pre><feDropShadow dx="水平偏移值" dy="垂直偏移值" stdDeviation="模糊度" flood-color="阴影颜色" flood-opacity="不透明度" /></pre>
<p>下面，我们设置了三个滤镜组，分别作用于三个矩形：</p>
<svg width="590" height="200">
<filter id="shadow1">
<feDropShadow dx="8" dy="8" stdDeviation="2" flood-color="#000" flood-opacity="0.9"></feDropShadow>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="green" flood-opacity="1"></feDropShadow>
</filter>
<filter id="shadow3">
<feDropShadow dx="-6" dy="-4" stdDeviation="4" flood-color="#000" flood-opacity="0.85"></feDropShadow>
</filter>
<rect x="20" y="20" width="160" height="160" fill="olive" filter="url(#shadow1)"></rect>
<rect x="220" y="20" width="160" height="160" fill="olive" filter="url(#shadow2)"></rect>
<rect x="410" y="20" width="160" height="160" fill="olive" filter="url(#shadow3)"></rect>
</svg>
<p>代码：</p>
<pre><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></pre>
<p>代码解析：</p>
<p>三个 filter 标签：每一个都有自己的 id 标识、内含一个 feDropShadow 滤镜，feDropShadow 滤镜的各属性值不尽一致。三个矩形 rect 标签：通过 filter 属性各绑定一个滤镜 id，将滤镜效果引用到自己身上。</p>
<p>【附】实体元素绑定滤镜的方法，还可以通过 CSS 设定，也是使用 filter 属性，试比较两种表达法的异同：</p>
<pre><span class="rred">svg标签属性：</span>filter="url(#shadow1)" ...
<span class="rred">CSS样式属性: </span>filter: url(#shadow1);</pre>
</div>
终于讲到专门的阴影内容了，记得上次用高斯模糊加偏移做阴影时，你就说过有专门的阴影内容。
这个好，可以设置颜色和不透明度，让阴影更细致了{:4_187:} flood-color=""和flood-opacity=""和feFlood里的一样呢吗，怪不得看着眼熟，stdDeviation=""的模糊度也和前面的单词一样{:4_204:} 用三个图图展示了各方向偏移和透明度及颜色影响，比较着学习真好{:4_187:} 第一个和第三个，不透明度只相差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
阴影讲究几个因素：偏移量、模糊度、颜色、透明度，所以，该有的都有
还好着几样都是原来的参数名，不是其他的名{:4_173:} 红影 发表于 2023-10-15 22:43
还好着几样都是原来的参数名，不是其他的名
对，都是所需的参数 红影 发表于 2023-10-15 22:42
这里的模糊度的差异感觉特别明显。
是的 马黑黑 发表于 2023-10-16 17:30
对，都是所需的参数
这就不用另外去记了，只要看熟它们就行了{:4_187:} 马黑黑 发表于 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
还有，它到底有什么参数、这些参数如何设置，用的时候查查总是对的
对我来说没本事去用，大都是复习的时候回头查查{:4_173:}