Question

我正在使用D3.js绘制气泡图。我想在SVG圈子的顶部添加阴影效果。但是当我使用滤镜添加阴影时，阴影会被添加到所有边。

我怎样才能将它放在顶部，如：

Expected:

Current:

这是html文件代码：

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> 
<style>
.inner-point{
width: 20px;
height: 10px;
background: white;
}
.header{
//margin-top:100px;
}
#left,#right{
  border:2px solid #78A9A9;
}
#right{
    border-left: none;
}
.head-top{
   color:#78A9A9;  
}

.right{
    text-align: center;
    margin-right: -17px;
    width: 460px;
}
.text-center{
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;

}
.link{
        position: relative;
    margin: 396px;
    bottom: 0px;
    color:#A37512;
}

.left-circle,.right-circle{
    padding-left: 0px;
    padding-right: 0px;
}
</style>
</head>
<body cz-shortcut-listen="true">



    <div class="header">
        <div class="left-circle col-sm-5">

        <svg id="left" width="458" height="500">
        <defs>
        <linearGradient id="gradient1" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
        <stop offset="0%" stop-color="#0365C0" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="#51A7F9" stop-opacity="1"></stop>
        </linearGradient>
        </defs>
        <defs>
        <linearGradient id="gradient2" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
        <stop offset="0%" stop-color="#773F9B" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="#885CB2" stop-opacity="1"></stop>
        </linearGradient>
        </defs>
        <defs>
        <filter id="drop-shadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
        <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
        <feMerge><feMergeNode in="offsetBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge></filter>
        </defs>
        <g class="node" transform="translate(197.1414719461316,229)">
        <circle class="shadowed" id="Provider25S1511" r="131.42764796408775" onclick="demo('Provider25S151','Amount of Spend $49979.62',1,262.14147194613156,327);" stroke="#0365C0" stroke-width="1" style="filter: url(&quot;#drop-shadow&quot;); fill: url(&quot;#gradient1&quot;);"></circle>
        <clipPath id="clip-Provider25S151"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Provider25S151">
        </use></clipPath>
        </g>
        </svg>
        </div>
       </div>
   </body></html>

Answer 1

在过滤器的<feOffset>元素中，将dy值稍微设为负值，将阴影向上移动一点。负值将其向上移动，正值将其向下移动。

所以改变

<feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>

到（例如）

<feOffset in="blur" dx="0" dy="-4" result="offsetBlur"></feOffset>

        <svg id="left" width="458" height="500">
        <defs>
        <linearGradient id="gradient1" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
        <stop offset="0%" stop-color="#0365C0" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="#51A7F9" stop-opacity="1"></stop>
        </linearGradient>
        </defs>
        <defs>
        <linearGradient id="gradient2" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
        <stop offset="0%" stop-color="#773F9B" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="#885CB2" stop-opacity="1"></stop>
        </linearGradient>
        </defs>
        <defs>
        <filter id="drop-shadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
        <feOffset in="blur" dx="0" dy="-4" result="offsetBlur"></feOffset>
        <feMerge><feMergeNode in="offsetBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge></filter>
        </defs>
        <g class="node" transform="translate(197.1414719461316,229)">
        <circle class="shadowed" id="Provider25S1511" r="131.42764796408775" onclick="demo('Provider25S151','Amount of Spend $49979.62',1,262.14147194613156,327);" stroke="#0365C0" stroke-width="1" style="filter: url(&quot;#drop-shadow&quot;); fill: url(&quot;#gradient1&quot;);"></circle>
        <clipPath id="clip-Provider25S151"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Provider25S151">
        </use></clipPath>
        </g>
        </svg>

D3 - 仅在气泡图顶部添加阴影

1 个答案: