Question

我尝试使用D3为svg图像添加阴影。我的代码如下，这里发布了一个示例块：

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)');

我已经使用上面的代码成功创建了一个圆形图像，但似乎无法显示阴影。理想情况下，我希望这个阴影完全包围圆形图像，但首先我需要让它完全出现。

更新：如果我删除下面的代码行，我会看到阴影，但它出现在原始图像周围。我的目的是让这个阴影出现在由clip-path：

产生的圆形图像周围

  .attr('clip-path', 'url(#clip-circle)')

Answer 1

将阴影应用于父元素，使其不会被剪裁。

＆＃13;

    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)');

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body></body>

＆＃13;

在D3中为svg图像添加阴影

1 个答案: