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

-1

我正在使用D3.js绘制气泡图。我想在SVG圆圈的顶部添加阴影效果。但是，当我使用过滤器添加阴影，然后阴影被添加到所有的侧面。D3 - 仅在气泡图顶部添加阴影

如何我只是把它在像顶部：

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>

来源

2016-12-28 dang

使用CSS下拉阴影 –

在筛选器中的<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>

来源

2016-12-28 17:20:44

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

回答

相关问题