文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用滤镜和d3.js在svg中部分更改阴影不透明度

问使用滤镜和d3.js在svg中部分更改阴影不透明度
EN

Stack Overflow用户
提问于 2018-06-04 04:10:01
回答 2查看 545关注 0票数 4

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

下面是我希望我的影子是什么样子的：

​

我指的是由写有Entity Name的矩形所投下的阴影。

这是我到目前为止所能做到的：

​

代码语言：javascript
复制
var svg = d3.select("#drawRegion")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%");
                
                
var defs = svg.append("defs");

var filter = defs.append("filter")
                 		.attr("id","coolShadow");

filter.append("feMorphology")
  .attr("in", "SourceGraphic")
  .attr("result", "upperLayer")
  .attr("operator", "dilate")
  .attr("radius", "2 2");

filter.append("feMorphology")
  .attr("in", "SourceAlpha")
  .attr("result", "enlargedAlpha")
  .attr("operator", "dilate")
  .attr("radius", "3 5");

filter.append("feGaussianBlur")
  .attr("in", "enlargedAlpha")
  .attr("result", "bluredAlpha")
  .attr("stdDeviation", "5");
  
filter.append("feOffset")
  .attr("in", "bluredAlpha")
  .attr("result", "lowerLayer")
  .attr("dy", "3");


var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
  .attr("in","lowerLayer");
feMerge.append("feMergeNode")
  .attr("in","upperLayer");

svg.append("rect")
    .attr("rx", 2)
    .attr("ry", 2)
	.attr("x", "20%")
  .attr("y", "20%")
  .attr("width", "60%")
  .attr("height", "60%")
  .attr("fill", "white")
  .style("filter", "url(#coolShadow)");
代码语言：javascript
复制
#drawRegion {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}
代码语言：javascript
复制
<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

​

如您所见，阴影几乎已经准备好了。我唯一不知道如何实现的事情-是增加的不透明度(现在它太大了，我想降低它，但同时保留左，上和右边界的透明度)。

我试着减少整体的不透明度，但没有帮助:左，上和右边界透明度也降低了，而我想让下边界部分更透明，并保持其他边界的原样。

我将非常感谢任何可以让我解决这个问题的更正，或者是一个完全不同的解决方案。

d3.js
svg
svg-filters
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-04 06:02:58

实现你想做的事情的最好方法是在第二个feMorphology上拨回y半径，在feOffset上拨回y半径。有一些方法可以有选择地减少不透明度，但它们会导致阴影中的不连续-这可能是你不想要的。

(您还需要扩展您的过滤器区域-我在这里为您做了这件事)。

但是，我想知道为什么要使用feMorphology来扩展源码矩形？如果你想要一个带有略微圆角的更大的矩形，你可以直接在SVG中绘制它-它会更有性能。feMorphology是一个很慢的操作。

​

代码语言：javascript
复制
var svg = d3.select("#drawRegion")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%");
                
                
var defs = svg.append("defs");

var filter = defs.append("filter")
                 		.attr("id","coolShadow")
                 		.attr("y","-20%")
                 		.attr("height","140%");

filter.append("feMorphology")
  .attr("in", "SourceGraphic")
  .attr("result", "upperLayer")
  .attr("operator", "dilate")
  .attr("radius", "2 2");

filter.append("feMorphology")
  .attr("in", "SourceAlpha")
  .attr("result", "enlargedAlpha")
  .attr("operator", "dilate")
  .attr("radius", "3 3");

filter.append("feGaussianBlur")
  .attr("in", "enlargedAlpha")
  .attr("result", "bluredAlpha")
  .attr("stdDeviation", "5");
  
filter.append("feOffset")
  .attr("in", "bluredAlpha")
  .attr("result", "lowerLayer")
  .attr("dy", "2");

var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
  .attr("in","lowerLayer");
feMerge.append("feMergeNode")
  .attr("in","upperLayer");

svg.append("rect")
    .attr("rx", 2)
    .attr("ry", 2)
	.attr("x", "20%")
  .attr("y", "20%")
  .attr("width", "60%")
  .attr("height", "60%")
  .attr("fill", "white")
  .style("filter", "url(#coolShadow)");
代码语言：javascript
复制
#drawRegion {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}
代码语言：javascript
复制
<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

​

票数 1
EN

Stack Overflow用户

发布于 2018-06-04 05:39:43

您可以在opacity和dy属性上进行播放。

不透明度将全局地使阴影更亮或更暗(值在0和1之间)。

dy属性(dx也是如此)垂直移动阴影(“移动光源”)。

如果dy为0，则阴影在图形上居中(光源恰好在图形的上方)。如果(就像你的例子一样)，dy是正的，那么阴影将被平移到底部，因此在阴影的形状下将更加明显。

以下是0.3上使用opacity的示例

代码语言：javascript
复制
.style("opacity", 0.3)

和0上的dy (你可以试用它来调整它以适应你的风格)：

代码语言：javascript
复制
.attr("dy", "0")

​

代码语言：javascript
复制
var svg = d3.select("#drawRegion")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "100%");
                
                
var defs = svg.append("defs");

var filter = defs.append("filter")
                 		.attr("id","coolShadow")
                    .attr("x", "-100%").attr("y", "-100%") //
                    .attr("width", "300%").attr("height", "300%"); //

filter.append("feMorphology")
  .attr("in", "SourceGraphic")
  .attr("result", "upperLayer")
  .attr("operator", "dilate")
  .attr("radius", "2 2");

filter.append("feMorphology")
  .attr("in", "SourceAlpha")
  .attr("result", "enlargedAlpha")
  .attr("operator", "dilate")
  .attr("radius", "3 5");

filter.append("feGaussianBlur")
  .attr("in", "enlargedAlpha")
  .attr("result", "bluredAlpha")
  .attr("stdDeviation", "4");
  
filter.append("feOffset")
  .attr("in", "bluredAlpha")
  .attr("result", "lowerLayer")
  .attr("dy", "0"); //


var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
  .attr("in","lowerLayer");
feMerge.append("feMergeNode")
  .attr("in","upperLayer");

svg.append("rect")
    .attr("rx", 2)
    .attr("ry", 2)
	.attr("x", "20%")
  .attr("y", "20%")
  .attr("width", "60%")
  .attr("height", "60%")
  .attr("fill", "white")
  .style("filter", "url(#coolShadow)")
  .style("opacity", 0.3); //
代码语言：javascript
复制
#drawRegion {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}
代码语言：javascript
复制
<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

​

请注意，我还修改了应用阴影的宽度/高度/位置，以避免它被截断：

代码语言：javascript
复制
var filter = defs.append("filter")
               .attr("id", "coolShadow")
               .attr("x", "-100%").attr("y", "-100%")
               .attr("width", "300%").attr("height", "300%");
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50670538

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档