Javascript 使用过滤器和d3.js部分更改svg中的阴影不透明度

如何使用过滤器和d3.js部分更改svg中的阴影不透明度

以下是我希望我的影子看起来的样子：

我指的是被写有

实体名称的矩形投下的阴影

以下是我迄今为止所取得的成就：


var svg=d3.选择（“drawRegion”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
var defs=svg.append（“defs”）；
var filter=defs.append（“filter”）
.attr（“id”、“酷影”）；
filter.append（“女性形态学”）
.attr（“in”，“SourceGraphic”）
.attr（“结果”、“上层”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“2”）；
filter.append（“女性形态学”）
.attr（“in”，“SourceAlpha”）
.attr（“结果”、“放大DALPHA”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“35”）；
filter.append（“feGaussianBlur”）
.attr（“in”，“enlargedAlpha”）
.attr（“结果”、“模糊阿尔法”）
.attr（“标准偏差”，“5”）；
filter.append（“feOffset”）
.attr（“in”，“bluedalpha”）
.attr（“结果”、“下层”）
.attr（“dy”，“3”）；
var feMerge=filter.append（“feMerge”）；
feMerge.append（“feMergeNode”）
.attr（“in”，“lowerLayer”）；
feMerge.append（“feMergeNode”）
.attr（“在”、“上层”）；
svg.append（“rect”）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“x”，“20%”）
.attr（“y”，“20%”）
.attr（“宽度”、“60%”）
.attr（“高度”、“60%”）
.attr（“填充”、“白色”）
.style（“过滤器”、“url（#酷影）”）；

#绘图区域{
宽度：100%；
身高：100%；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}
您可以同时使用
不透明度
和
dy
属性

不透明度将全局地使阴影变亮或变暗（值介于0和1之间）

dy
属性（同样适用于
dx
）垂直移动阴影（“移动光源”）

如果
dy
为
0
，则阴影位于形状的中心（光源正好位于形状上方）。如果（在您的案例中），
dy
为正，则阴影将被转换到底部，从而在阴影的形状下更加明显

以下是
0.3
处的
opacity
示例：

.style("opacity", 0.3)

和
dy
at
0
（您可以使用它来调整它以适应您的风格）：


var svg=d3.选择（“drawRegion”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
var defs=svg.append（“defs”）；
var filter=defs.append（“filter”）
.attr（“id”、“酷影”）
.attr（“x”、“-100%”）。attr（“y”、“-100%”）//
.attr（“宽度”、“300%”）attr（“高度”、“300%”）//
filter.append（“女性形态学”）
.attr（“in”，“SourceGraphic”）
.attr（“结果”、“上层”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“2”）；
filter.append（“女性形态学”）
.attr（“in”，“SourceAlpha”）
.attr（“结果”、“放大DALPHA”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“35”）；
filter.append（“feGaussianBlur”）
.attr（“in”，“enlargedAlpha”）
.attr（“结果”、“模糊阿尔法”）
.attr（“标准偏差”，“4”）；
filter.append（“feOffset”）
.attr（“in”，“bluedalpha”）
.attr（“结果”、“下层”）
.attr（“dy”，“0”）//
var feMerge=filter.append（“feMerge”）；
feMerge.append（“feMergeNode”）
.attr（“in”，“lowerLayer”）；
feMerge.append（“feMergeNode”）
.attr（“在”、“上层”）；
svg.append（“rect”）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“x”，“20%”）
.attr（“y”，“20%”）
.attr（“宽度”、“60%”）
.attr（“高度”、“60%”）
.attr（“填充”、“白色”）
.style（“过滤器”、“url（#酷影）”）
.样式（“不透明度”，0.3）//
#绘图区域{
宽度：100%；
身高：100%；
显示：内联块；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
位置：相对位置；
}
实现所需操作的最佳方法是回拨第二个feMorphology上的y半径和feOffset上的y。有很多方法可以有选择地降低不透明度，但它们会导致阴影的不连续性——这可能是你不想要的

（你还需要扩展你的过滤区域——我在这里为你做的）

我想知道，为什么你要用女性形态学来扩展源矩形？如果你想要一个更大的带有稍微圆角的矩形，你可以直接在SVG中画出来——这样会更有效果。女性形态学是一个缓慢的操作


var svg=d3.选择（“drawRegion”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
var defs=svg.append（“defs”）；
var filter=defs.append（“filter”）
.attr（“id”、“酷影”）
.attr（“y”、“-20%”）
.attr（“高度”、“140%”）；
filter.append（“女性形态学”）
.attr（“in”，“SourceGraphic”）
.attr（“结果”、“上层”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“2”）；
filter.append（“女性形态学”）
.attr（“in”，“SourceAlpha”）
.attr（“结果”、“放大DALPHA”）
.attr（“操作员”、“扩张”）
.attr（“半径”、“3”）；
filter.append（“feGaussianBlur”）
.attr（“in”，“enlargedAlpha”）
.attr（“结果”、“模糊阿尔法”）
.attr（“标准偏差”，“5”）；
filter.append（“feOffset”）
.attr（“in”，“bluedalpha”）
.attr（“结果”、“下层”）
.attr（“dy”，“2”）；
var feMerge=filter.append（“feMerge”）；
feMerge.append（“feMergeNode”）
.attr（“in”，“lowerLayer”）；
feMerge.append（“feMergeNode”）
.attr（“在”、“上层”）；
svg.append（“rect”）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“x”，“20%”）
.attr（“y”，“20%”）
.attr（“宽度”、“60%”）
.attr（“高度”、“60%”）
.attr("dy", "0")