Add drop-shadow to svg image in D3
Question
I'm attempting to add a drop-shadow to an svg image with D3. My code is below and an example block is posted here:
http://blockbuilder.org/anonymous/0751a819af7570b767ff
var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png';
var margin = {
top: 20,
right: 10,
bottom: 20,
left: 10
};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");
var defs = svg.append('defs');
var clipPath = defs.append('clipPath')
.attr('id', 'clip-circle')
.append('circle')
.attr('r', 140)
.attr('cy', height / 2 - 10)
.attr('cx', width / 2 - 10);
var filter = defs.append('filter')
.attr('id', 'drop-shadow')
.attr('height', '130%');
filter.append('feGaussianBlur')
.attr('in', 'SourceAlpha')
.attr('stdDeviation', 5)
.attr('result', 'blur');
filter.append('feOffset')
.attr('in', 'blur')
.attr('dx', 5)
.attr('dy', 5)
.attr('result', 'offsetBlur');
var feMerge = filter.append('feMerge');
feMerge.append('feMergeNode')
.attr('in', 'offsetBlur')
feMerge.append('feMergeNode')
.attr('in', 'SourceGraphic');
svg.append('image')
.attr('x', width / 2 - 260)
.attr('y', height / 2 - 204)
.attr('height', 408)
.attr('width', 520)
.attr('xlink:href', imgurl)
.attr('filter', 'url(#drop-shadow)')
.attr('clip-path', 'url(#clip-circle)');
I have successfully created a circular image with the above code, but cannot seem to get the drop-shadow to appear. Ideally I would like this drop-shadow to completely surround the circular image, but first I need to get it to appear at all.
UPDATE: If I remove the below line of code I see the drop-shadow, but it appears around the original image. My aim is to make this drop-shadow appear around the circular image that results from clip-path :
.attr('clip-path', 'url(#clip-circle)')
1 answers
solution1
1 ACCPTED 2015-11-22 17:59:44
Apply the shadow to a parent element so it doesn't get clipped.
var imgurl = 'http://www.logo-designer.co/wp-content/uploads/2015/08/2015-Penn-State-University-logo-design-4.png'; var margin = { top: 20, right: 10, bottom: 20, left: 10 }; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var svg = d3.select('body').append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', "translate(" + margin.left + "," + margin.top + ")"); var defs = svg.append('defs'); var clipPath = defs.append('clipPath') .attr('id', 'clip-circle') .append('circle') .attr('r', 140) .attr('cy', height / 2 - 10) .attr('cx', width / 2 - 10); var filter = defs.append('filter') .attr('id', 'drop-shadow') .attr('height', '130%'); filter.append('feGaussianBlur') .attr('in', 'SourceAlpha') .attr('stdDeviation', 5) .attr('result', 'blur'); filter.append('feOffset') .attr('in', 'blur') .attr('dx', 5) .attr('dy', 5) .attr('result', 'offsetBlur'); var feMerge = filter.append('feMerge'); feMerge.append('feMergeNode') .attr('in', 'offsetBlur') feMerge.append('feMergeNode') .attr('in', 'SourceGraphic'); var g = svg.append('g') .attr('filter', 'url(#drop-shadow)'); g.append('image') .attr('x', width / 2 - 260) .attr('y', height / 2 - 204) .attr('height', 408) .attr('width', 520) .attr('xlink:href', imgurl) .attr('clip-path', 'url(#clip-circle)');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body></body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.