Trying to apply a drop-shadow effect to an SVG image using D3. Check out my code below and see the example block here:
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've managed to create a circular image with this code, but struggling to make the drop-shadow visible. The goal is to have the drop-shadow completely surround the circular image.
UPDATE: Removing the line of code below reveals the drop-shadow, though it encircles the original image. I want the shadow to be around the resulting circular image from clip-path:
.attr('clip-path', 'url(#clip-circle)')